如何在android中的jquery mobile中摆脱空白或不正确的加载？

Question

我在内容结束和页脚开始之间的jquery mobile之间会产生一个空白区域。我在android 4.0.3中有这个问题，怎么能摆脱这个问题。请帮我解决这个问题。我已经添加了截图来展示我是如何在模拟器中得到的。谢谢。

Answer 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 。