您可以強制正確的內容高度使用此功能:
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