jQM ui-content 100% 高度问题 [英] jQM ui-content 100% height issue

问题描述

我按照这篇文章尝试将我的 jQM 页面 ui-content 背景图像高度设置为 100%:链接到 Omar 提供的解决方案

我有两个问题，首先是高度没有达到 100%(不到 16 像素)，其次是背景图像会在过渡前拉伸它的高度，过渡后会收缩.任何人都有解决此问题的解决方案吗?

以下是我的代码:

$(document).on('pagebeforeshow', '#userMainPage', function () {var screen = $.mobile.getScreenHeight();alert("屏幕高度:" + screen);var header = $(".ui-header").hasClass("ui-header-fixed") ?$(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();alert("标题大小:" + 标题);var footer = $(".ui-footer").hasClass("ui-footer-fixed") ?$(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();alert("页脚大小:" + 页脚);/* 内容 div 的内边距为 1em = 16px (32px top+bottom).直接从 content var 中减去 32px 可以跳过这一步.*/var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();alert("ui-content 外层高度:" + $(".ui-content").outerHeight());alert("ui-content height:" + $(".ui-content").height());alert("ContentCurrent:" + contentCurrent);var content = 屏幕 - 页眉 - 页脚 - contentCurrent;alert("内容:" + 内容);$(".ui-content").height(content);});

我就是无法达到 100% 的高度.我的高度不足 16 像素，才能达到 100% 的高度.

以下信息以更好地调试:

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

• contentCurrent:32

• 最终新高度:438

请告诉我这里有什么问题.提前致谢.

解决方案

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

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

function contentHeight() {var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),屏幕 = $.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(),内容 = 屏幕 - 页眉 - 页脚 - contentCurrent;/* 应用结果 */$(".ui-content", activePage).height(content);}$(document).on("pagecontainertransition", contentHeight);$(window).on("throttledresizeorientationchange", contentHeight);

<块引用>

演示

I follow this post trying to get my jQM Page ui-content background image height to 100%: Link to solution provided by Omar

I got 2 problem, first is height doesn't meet 100% (short of 16px), second is the background image will stretch it's height a little longer before transition, and shrink back after transition. Anyone have any solution to fix this?

The following is my code:

$(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);
});

I just can't get 100% height. My height is short of 16px to be Full 100% height.

Following info for better debugging:

• Screen height: 548
• header size: 44
• footer size: 34
• outerHeight: 32
• ui-content.height: 0

• contentCurrent: 32

• final new height: 438

Please tell me what is wrong here. Thank you in advance.

解决方案

My answer here explains how to set content div's height to fit screen 100% without causing page to scroll, in case contents are not filling viewport's height.

To apply this method on each and every page, you need to check for active page and then retrieve heights of header, footer and content div. You then need to apply the result on .ui-content within active page, and only on pagecontainershow or pagecontainertransition. Those events fire when page is fully shown, otherwise, you won't get actual height.

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% 高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！