您可以强制正确的内容高度使用此功能:
function getRealContentHeight() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
return content_height;
}
它必须在pageshow活动期间,因为只有在这一点上的页面高度激活是正确的:
$(document).on('pageshow', '#index', function(){
$.mobile.activePage.find('.ui-content').height(getRealContentHeight());
});
工作例如:http://jsfiddle.net/Gajotres/nVs9J/
如果您想了解更多关于此功能阅读我的另一篇文章:https://stackoverflow.com/a/14550417/1848600
我做同样的事情,这就是为什么这是我在全屏幕放在第一位。当我第二次访问该页面时发生问题。正如你可以看到标题移动到屏幕的可见空间上方并在页眉和页脚之间添加空间。红色的颜色你看到的是背景颜色的div保持整个页面和浅灰色是在div#内容的背景颜色。 – 2013-05-10 09:05:44