Question

我按照这篇文章试图让我的jQM页面ui内容背景图片高度达到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％的身高。我的身高低于16px，高度为100％。

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

屏幕高度：548
标题大小：44
页脚大小：34
outerHeight：32
ui-content.height：0
contentCurrent：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

jQM ui-content 100％高度问题

1 个答案: