0

我想使用设备的屏幕使地图高度自动...但是当我将 style.height 更改为自动、100%、screen.height 时，地图消失了...如何使高度为自动? 这是我的代码...

脚本.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>
4

2 回答 2

0

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

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

您可以使用：

$("#map_canvas").css({
    'width':screen.width,
    'height':"20em"
});
于 2013-06-13T07:54:00.653 回答
0

请检查此示例：我认为您的问题与 css 与 javascript 无关。您要设置的 % 高度将基于父级高度，因此如果父级为空，则 0 的 100% 将为 0：检查此

代码示例：

<!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>
于 2013-06-13T08:01:29.247 回答