Content “div” Height – Fill Page Height

When elements within data-role="content" (jQM 1.3) / role="main" + class="ui-content" (jQM 1.4) don’t fill the minimum height of page, the page’s background becomes visible, or the footer hangs in the middle of the page when it isn’t fixed.


Short content div

The above snapshot illustrates the problem that many developers want to get rid of. Although content div has height set to 100%, it still doesn’t fill the available space in page div.


Full height

A simple calculation of viewport, header, footer and current content height. If fixed toolbars are being used, one pixel should be deducted from the returned value of toolbar‘s .outerHeight(). Because when a toolbar is fixed, it has margin-top: -1px for header and margin-bottom: -1px for footer.

The .height() and .outerHeight() of content div should be calculated as well, since it has padding: 1em from each side.

For best results, the code below should be called on these events $(document).on("pagecontainertransition"), $(window).on("resize") and $(window).on("orientationchange").

var screen = $.mobile.getScreenHeight(),
    header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight(),
    footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight(),
    contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height(),
    content = screen - header - footer - contentCurrent;

Buy Me A Coffee :) @

About these ads

7 thoughts on “Content “div” Height – Fill Page Height

  1. When you have multiple headers some of which are floating

        $(document).on("pagecontainertransition", adjustContentHeight);
        $(window).on("resize" , adjustContentHeight) ;
        $(window).on("orientationchange", adjustContentHeight);
        function adjustContentHeight()
            var headerHeights = 0;
            $('.ui-header').each(function(index, obj){
                     var itm = $( this );
                     if (itm)
                        headerHeights = headerHeights + itm.outerHeight();
            var screen = $.mobile.getScreenHeight();
            var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
            var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
            var content = screen - headerHeights - footer - contentCurrent;
  2. Pingback: Content “div” Height – Fill Page Height–Part 2 | jQuery Mobile Tricks
  3. Hello Omar. I’ve tried using your script on a multi-page app I’m working with that also has a persistent header. It works perfectly for the first page (when loading up the app). But as soon as I change the page the problem shows up again, and I end up with a white bar at the bottom (even below a footer if I have one).

    It also has the next funny behaviour: After calling contentHeight on resize or orientationchange, the white space adjusts to the new orientation. This didn’t happen without the script.

    Do you know of a fix that applies to multiple pages in one document? Thank you.

  4. Pingback: Preload Google Maps – jQuery Mobile | jQuery Mobile Tricks

Drop me a line or two ;)

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s