javascript - jQM ui-content 100% height issue

Question

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.

Answer 1

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