style.height doesnt work javascript

Question

i want to make the map'e height is auto with the device's screen... but when i change the style.height to auto, 100%, screen.height, the map is disappear... how to make the height is auto? this is my code...

script.js

$('#home').live('pagecreate',function(){
document.getElementById('map_canvas').style.width=screen.width;
document.getElementById('map_canvas').style.height="20em";
});

in index.html i just called

<div id="home" data-role="page">
    <div data-role="header">
    *my header*
    </div>

    <div data-role="content">
        <div id="map_canvas"></div>
    </div>
</div>

if i use #map_canvas, the script will not work...thats why i didnt use # — Wen Hau, Jun 13 '13 at 07:19
Does your js debugger agree with you? try $('#map_canvas').css('height','auto'); — Alessandro Gabrielli, Jun 13 '13 at 07:20
yup...its work perfectly without #... i hv tried $('#map_canvas').css('height','auto'); its still the same with use screen.height...the map is dissappear...but when i set the height to "20em" it works... — Wen Hau, Jun 13 '13 at 07:34
Probably there are some other rules to be considered for that element. Gl — Alessandro Gabrielli, Jun 13 '13 at 07:38

score 0 · Answer 1 · answered Jun 13 '13 at 07:54

0

if you use jquery you can do as below: instead of this:

document.getElementById('map_canvas').style.width=screen.width;
document.getElementById('map_canvas').style.height="20em";

you can use:

$("#map_canvas").css({
    'width':screen.width,
    'height':"20em"
});

answered Jun 13 '13 at 07:54

Robz

1,140
3
14
35

thank you very much....it works...i want height is auto...so i change the height to "screen.height" without "...but the format is like that..... – Wen Hau Jun 13 '13 at 08:31

score 0 · Answer 2 · edited May 23 '17 at 10:32

Please check this example: I think your problem is related to css not to javascript. The % height you want to set will be based on the parent height, so if the parent is empty, the 100% of 0 will be 0: check this

code example:

<!DOCTYPE html>
<html>
    <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<style>
#map_canvas{
    background-color:#00F;
    }
#cont{
    background:#F00;
    height:200px;
    }
</style>
<button onClick="doit1()">Click me to put something in map_canvas</button>
<button onClick="doit()">Click me to make the height 100%</button>

<div id="home" data-role="page">
    <div data-role="header">
    *my header*
    </div>

    <div id="cont" data-role="content">
        <div id="map_canvas"></div>
    </div>
</div>
</body>
<script>
$('#home').live('pagecreate',function(){
$('#map_canvas').css('height','auto');
});
function doit(){
    $('#map_canvas').css('height','100%');
    }
function doit1(){
    $('#map_canvas').html('a')
    }
</script>
</html>

style.height doesnt work javascript

2 Answers2