jQM ui-content 100% 高度问题

Question

我关注这篇文章试图将我的 jQM 页面 ui-content 背景图像高度设置为 100%： Link to solution provided by Omar

我遇到了 2 个问题，首先是高度没有达到 100%（小于 16px），其次是背景图像在过渡前会拉伸它的高度，过渡后会缩小。有没有人可以解决这个问题？

以下是我的代码：

$(document).on('pagebeforeshow', '#userMainPage', function () {
    var screen = $.mobile.getScreenHeight();
    alert("Screen height: " + screen);
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    alert("Header size: " + header);
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
    alert("Footer size: " + footer);
    /* content div has padding of 1em = 16px (32px top+bottom). This step can be skipped by subtracting 32px from content var directly. */
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
    alert("ui-content outerHeight: " + $(".ui-content").outerHeight());
    alert("ui-content height: " + $(".ui-content").height());
    alert("ContentCurrent: " + contentCurrent);
    var content = screen - header - footer - contentCurrent;
    alert("Content: " + content);
    $(".ui-content").height(content);
});

我就是无法达到 100% 的高度。我的身高不足 16 像素，无法达到 100% 的高度。

以下信息以便更好地调试：

• 屏幕高度：548
• 标题大小：44
• 页脚大小：34
• 外部高度：32
• ui-content.height: 0

• 内容当前：32

• 最终新高度：438

请告诉我这里出了什么问题。提前谢谢你。

Answer 1

我在这里的回答解释了如何设置内容 div 的高度以适应屏幕 100% 而不会导致页面滚动，以防内容没有填充视口的高度。

要在每个页面上应用此方法，您需要检查活动页面，然后检索页眉、页脚和内容 div 的高度。然后，您需要将结果应用于活动页面内的.ui-content，并且仅应用于pagecontainershow 或pagecontainertransition。这些事件在页面完全显示时触发，否则，您将无法获得实际高度。

function contentHeight() {
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
        screen = $.mobile.getScreenHeight(),
        header = $(".ui-header", activePage).hasClass("ui-header-fixed") ? $(".ui-header", activePage).outerHeight() - 1 : $(".ui-header", activePage).outerHeight(),
        footer = $(".ui-footer", activePage).hasClass("ui-footer-fixed") ? $(".ui-footer", activePage).outerHeight() - 1 : $(".ui-footer", activePage).outerHeight(),
        contentCurrent = $(".ui-content", activePage).outerHeight() - $(".ui-content", activePage).height(),
        content = screen - header - footer - contentCurrent;
    /* apply result */
    $(".ui-content", activePage).height(content);
}

$(document).on("pagecontainertransition", contentHeight);
$(window).on("throttledresize orientationchange", contentHeight);

Demo