javascript - jQM ui-content 100%高度问题

Question

我按照这篇文章试图让我的 jQM 页面 ui-content 背景图像高度达到 100%: Link to solution provided by Omar

我遇到了两个问题，首先是高度没有达到 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% 的高度。我的高度不足 16px 才能达到完整的 100% 高度。

为了更好地调试，请引用以下信息:

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

• 内容当前:32

• 最终新高度:438

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

Answer 1

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

要在每个页面上应用此方法，您需要检查事件页面，然后检索页眉、页脚和内容 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