jquery - jQuery Mobile 1.42 中每个屏幕底部的空白

Question

您好，我正在使用 jquery mobile 1.42 开发 Web 应用程序。除了在每个页面的窗口底部出现不需要的空白之外，一切都很好。我只有标题和内容。我没有使用页脚。谁能指导我。

Answer 1

您需要了解 jQuery Mobile 页面的工作原理。页脚和页眉固定有固定的高度值。另一方面，内容是可拉伸(stretch)的，因此它会根据其内部内容调整大小，它从不会自动调整大小以占用页脚和页眉之后剩余的可用空间。未被内容覆盖的空间是您提到的空白。

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

CSS 解决方案:

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

40px是因为header和footer，如果不需要就设置为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 .