Question

我想通过设备的屏幕使地图高度自动... 但是当我将style.height改为auto，100％，screen.height时，地图就消失了...... 如何让高度自动？这是我的代码......

的script.js

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

在index.html中我只是打电话

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

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

Answer 1

如果您使用jquery，您可以执行以下操作：而不是这个：

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

你可以使用：

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

Answer 2

请检查example：我认为你的问题与css有关，而不是javascript。您要设置的％高度将基于父高度，因此如果父级为空，则0的100％将为0：check this

代码示例：

<!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不起作用的JavaScript

2 个答案: