我有一个与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将页脚底部，因此我有这个页面：
在哪里可以看到地图，只能使用它移动到底部之前剩下的空间。
解决方法
您不需要等待事件，您需要将.ui-content元素的高度设置为大约100％左右。
这是一个纯粹的CSS方法，为jQuery Mobile伪页面实现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;
}
