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

问题描述

我按照这篇文章试图让我的jQM页面的ui-content背景图片高度到100％：
链接到Omar提供的解决方案

我有2个问题，首先是高度不满足100％ ），第二是背景图像将拉伸它的高度稍长一点，在转换之前，收缩回来后过渡。任何人都有解决方案来解决这个问题？

以下是我的代码：

  $（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）。 hasHeight（ui-footer-fixed）？$（。ui-footer）。outerHeight（） -  1：$（。ui-footer）。 ：+ footer）; 
 / * content div有1em = 16px（32px top + bottom）的填充，这个步骤可以通过从内容var直接减去32px来跳过* / 
 var contentCurrent = $ （.ui-content）。outerHeight（） -  $（。ui-content）。height（）; 
 alert（ui-content outerHeight： .outerHeight（））; 
 alert（ui-content height：+ $（。ui-content）。 
 alert（ContentCurrent：+ contentCurrent）; 
 var content = screen  -  header  -  footer  -  contentCurrent; 
 alert（Content：+ content）; 
 $（。ui-content）。height（content）; 
}）; 
  

我只能得到100％的高度。

以下信息可帮助您更好地进行调试： b $ b

• 屏幕高度：548


• 页眉大小：44


• 页脚大小：34


• outerHeight：32


• ui-content.height：0



• contentCurrent：32

这里错了。提前感谢。

解决方案

我的答案解释了如何设置内容div的高度以适应屏幕100％，而不会导致页面滚动





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

  function contentHeight $ b 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）; 
  








演示







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