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

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