使用jQuery Mobile的所有可用空间的内容
SER*_*PRO 18 css google-maps-api-3 jquery-mobile
我有一个jQuery Mobile + phonegap的项目,我的页脚和内容div有一些问题.
一个基本的jQuery Mobile页面如下所示:
<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加载到底部之前加载的,因此我有这个页面:
您只能使用在移动到底部之前留下的空间来查看地图的位置.
我的问题是..我应该等待什么事件,或者我需要添加到我的代码中以加载地图以便它将使用页眉和页脚之间的所有空间？
Jas*_*per 21
你不需要等待事件,你需要将.ui-content元素的高度设置为周围的东西100%.
这是一个实现100%jQuery Mobile伪页面高度的纯CSS方法:
/*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;
}?
这是一个演示:http://jsfiddle.net/jasper/J9uf5/2/
- 谢谢你的解决方案.我很长一段时间都在寻找这个. (2认同)
这个也有效:
<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>
小智 5
只需添加此CSS:
<style>
#map{
height: 0;
}
#map_canvas {
height: 100%;
padding: 0;
text-shadow: none;
}
</style>
- 我不明白为什么让父母身高达到0并希望孩子100%让这个工作,但这很有效. (2认同)
| 归档时间： |
|
| 查看次数： |
24187 次 |
| 最近记录： |