Question

您好iam使用jquery mobile 1.42来开发Web应用程序。除了每页上窗口底部出现不需要的空白外，每件事都很有效。我只有标题和内容。我没有使用页脚。任何人都可以指导我。

Answer 1

您需要了解jQuery Mobile页面的工作原理。页脚和页眉用固定的高度值固定。另一方面，内容是可伸缩的，因此它将根据其内部内容调整大小，它将从不自动调整大小以占用剩余的可用空间，从页脚和页眉后面留下。内容未涵盖的空间是您提到的空白区域。

有两个可用的解决方案，两个问题，一个是基于CSS的，另一个是基于JavaScript的。

CSS解决方案：

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

40px在这里是因为页眉和页脚，如果你不需要它们就把它设置为0.

工作示例：http://jsfiddle.net/Gajotres/hJVuM/

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

工作示例：http://jsfiddle.net/Gajotres/5Qu6P/

详情了解此主题 here 。

jquery mobile 1.42中每个屏幕底部的空白区域

1 个答案:

CSS解决方案：

JavaScript解决方案