如何摆脱 Android 中 jquery mobile 中的空白或加载不当？答案

【问题标题】：How to get rid of white space or improper loading in jquery mobile in android?如何摆脱 Android 中 jquery mobile 中的空白或加载不当？
【发布时间】：2014-05-21 16:04:19
【问题描述】：

我在内容结尾和页脚开头之间在 jquery mobile 中得到一个空白。我在 android 4.0.3 中遇到了这个问题，如何解决这个问题。请帮助我解决这个问题。我添加了屏幕截图以显示我如何在模拟器中得到它。谢谢。

【问题讨论】：

标签： android performance jquery-ui jquery-mobile

【解决方案1】：

请下次试试看这个问题，这是最常见的问题。

如您所见，data-role="content" 不会覆盖可用空间。因此，您需要使用 CSS 或 javascript 来执行此操作。

CSS 解决方案：

.ui-content {
    padding: 0;
    position: absolute !important;
    top : 40px !important; 
    right : 0;
    bottom : 40px !important; 
    left : 0 !important;    
}

JavaScript 解决方案：

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;
}

阅读更多信息here，并附上工作示例。

【讨论】：