Content “div” Height – Fill Page Height

Click here for New CSS Solutions

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 :) @


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

  1. I have a problem. My application is multipage layout, when I change from the first page to the second the function said that header’s and footer’s height is 1px Why?.
    In the first page works fine.

  2. Hi @Nishanth, nice solution! To be honest, I have tested code on iPhone only. The delay should fix the problem on any device, thanks for sharing it 🙂

  3. Hi,
    Thanks for the great solution. I am using your solution. However I find that the on my experia android phone, the script calculated new size is not correct all the time. Infact, most of the times while going from landscape to portrait, it ends up having white space. I looked up jquerymobile documentation at
    It says that “if your bindings are dependent on the height and width values you may want to disable orientationChange altogether….”, because the precise time when the script runs seems to be browser dependent. So I modified your solution by adding an arbitrary 500ms delay after orientationchange event is fired, before your script runs. This works fine for me every time.

    $( window ).on( "orientationchange", function( event ) {
    /* this event could fire even before the new height and width is finalized
       BUG: better start a 500ms timer here and call fit content to window again upon 
       timer finishing just to make sure that we have more chance of correcting
       the height and width incase we got them wrong */
       window.setTimeout(fitcontenttowindow, 500);
    fitcontenttowindow() {
    /* the original solution originally suggested here goes in this space */
  4. 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;
  5. Pingback: Content “div” Height – Fill Page Height–Part 2 | jQuery Mobile Tricks
  6. 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.

  7. 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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s