2

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.

Community
  • 1
  • 1
MarkZ
  • 280
  • 3
  • 14

1 Answers1

2

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

Omar
  • 32,302
  • 9
  • 69
  • 112
  • 1
    Ha haha ha haha I dared you :D – Gajotres May 20 '14 at 16:19
  • @Gajotres I'm just clarifying one of my answers (after-answer services) :P Maybe I should add that answer to the original answer. – Omar May 20 '14 at 16:20
  • Hi Omar, the height is now 100% but the page have vertical scroll even the page is empty. Any idea where is wrong? – MarkZ May 20 '14 at 17:22
  • @user3053891 it's difficult to know unless you provide more details. Do you have fixed toolbars? Are you calling the function on events as in my answer? – Omar May 20 '14 at 17:41
  • Ok I'll try make a simplified version to replicate the error on jsfiddle. Will update here again. Thank you. – MarkZ May 20 '14 at 18:09
  • @user3053891 sure, let me know once you create a fiddle :) – Omar May 20 '14 at 20:35