使用jQuery移动设备的所有可用空间的内容
使用jQuery移动设备的所有可用空间的内容
提问于 2012-02-29 00:14:23
我有一个与jQuery手机+ phonegap的项目，我有一些问题与页脚和内容div。
一个基本的jQuery移动页面如下所示：
<div data-role="page" data-theme="b" id="map">
<div data-role="header" data-theme="b" data-position="inline">
<a href="#" data-rel="back" data-icon="arrow-l">Back</a>
<h1>MAP</h1>
</div><!-- /header -->
<div data-role="content" id="map_canvas">
</div><!-- /content -->
<div data-role="footer" data-theme="d">
<h4>TEST</h4>
</div><!-- /footer -->
</div><!-- /page -->现在我正在尝试在内容中加载谷歌地图，所以我在JavaScript中使用了以下代码：
$('div').live("pageshow", function()
{
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}这就是结果：
问题是，除非您像这样指定属性data-position="fixed"，否则页脚不会粘在底部：
<div data-role="footer" data-theme="d" data-position="fixed">
<h4>TEST</h4>
</div><!-- /footer -->这很好，但问题是在jquery mobile将页脚放到底部之前，地图已经加载了，因此我有了这个页面：
在这里，你只能使用地图移动到底部之前留下的空间来查看地图。
我的问题是..我应该等待什么事件，或者我需要在代码中添加什么才能加载地图，这样它就会使用页眉和页脚之间的所有空间？
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-02-29 01:09:40
您不需要等待事件，只需将.ui-content元素的高度设置为100%周围的某个值即可。
这是一个纯CSS方法来实现一个jQuery移动伪页面的100%高度：
/*make sure the viewport is 100% height*/
html, body {
height : 100%;
}
/*make the page element 100% height*/
#map-page {
height : 100%;
}
/*specify a height for the header so we can line-up the elements, the default is 40px*/
#map-page .ui-header {
height : 40px;
}
/*set the content to be full-width and height except it doesn't overlap the header or footer*/
#map-page .ui-content {
position : absolute;
top : 40px;
right : 0;
bottom : 30px;
left : 0;
}
/*absolutely position the footer to the bottom of the page*/
#map-page .ui-footer {
position : absolute;
bottom : 0;
left : 0;
width : 100%;
height : 30px;
}Stack Overflow用户
发布于 2013-02-23 04:36:17
这个也行得通：
<html>
<head>
<meta name="viewport" id="viewport"
content="width=device-width, height=device-height,
initial-scale=1.0, maximum-scale=1.0,
user-scalable=no;" />
</head>
<body>
....
<div data-role="header" data-position="fixed">
....
<div data-role="footer" data-position="fixed">
....
</body>
</html>Stack Overflow用户
发布于 2013-05-10 06:29:04
只需添加此css：
<style>
#map{
height: 0;
}
#map_canvas {
height: 100%;
padding: 0;
text-shadow: none;
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9485568
复制相关文章
相似问题