Question

我正在使用jQuery Mobile开发移动应用程序，我在内容和页脚之间获得了一个空白区域。我如何关闭这个空间？

Answer 1

这个问题有3个解决方案。

如果您对内容和页面容器使用相同的 data-theme 。不幸的是它不会看起来很好，因为它们之间仍然会有明显的差异
请勿在容器上使用 data-theme ，但始终只在页面div上使用它。仍然不是最好的解决方案。

调整内容大小以填充可用空间。使用此方法：

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

在我的其他 ARTICLE （我的个人博客）中详细了解此解决方案，或者找到 HERE ，查找以下内容： 获取正确的最大内容高度。

Answer 2

您可以在风格/ CSS中调整ui-page-theme-a的颜色，这样就不会识别它

.ui-page-theme-a
{
    background-color: sameAsContent/Footer !important;
    border-color: sameAsContent/Footer !important;

}

使用jQuery Mobile删除内容和页脚之间的空白：移动应用程序

2 个答案: