Content “div” Height – Fill Page Height – Pure CSS Solutions


If you prefer a cross-browser and responsive CSS solution to fill available height of page, here are some tips.

Note: use this solution for specific pages, otherwise, scrolling will malfunction if content’s height is greater than viewport’s height. Because the solution sets page height to 100% which stop page from scrolling.

There are three different solutions; full-screen, non-fixed toolbars and fixed toolbars. Each solution utilizes different CSS property(s).

Full-screen

This solution is simple, easy and straight-forward. It depends on height inheritance; each div inherits height from its’ parent.

<div data-role="page" id="pageID">
   <div role="main" class="ui-content">
      <div id="full-height">
      </div>
   </div>
</div>

The below CSS will set each div’s height to fill viewport’s height.

html,
body,
#pageID {
  height: 100%;
  margin: 0;
  padding: 0;
}
.ui-content {
  padding: 0;
}
.ui-content,
.ui-content #full-height {
  height: inherit; /* the trick */
}

Full-screen demo


 

Fixed toolbars

This solution uses height: inherit; with the help of box-sizing: border-box; property. As you know, jQuery Mobile adds top and bottom padding to avoid content overlapping with fixed header and footer. What does box-sizing: border-box; do? It emits true height of an element without padding and border. If you have an element with 50px height, 10px padding and 5px border, the total height will be 50px + 20px (top & bottom padding) + 10px (top + bottom border) = 80px. With box-sizing: border-box; the total height is 50px only.

html,
body,
#pageID {
  height: 100%;
  margin: 0;
  padding: 0;
}

#pageID,
#pageID * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#pageID .ui-content {
  height: inherit; /* inherit height without padding nor border */
}

Fixed toolbars demo


 

non-Fixed toolbars

The solution here is a bit different as there is no padding adding to page div. Therefore, calc() will replace height: inherit;. calc() will be used to calculate height of viewport (100%) minus 89px; the 89px represents height of header (44px) and footer (44px). I honestly don’t know where the extra 1px comes from, I have spent hours to find out to no avail. Anyway, page will scroll without that removing this mysterious pixel.

html,
body,
#pageID {
  height: 100%;
  margin: 0;
  padding: 0;
}

#pageID,
#pageID * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#pageID .ui-content {
  height: calc(100% - 89px);
}

Non-Fixed toolbars demo

I hope you find this article useful. If you intend to use an iframe inside content div, here is another solution.

Advertisements

4 thoughts on “Content “div” Height – Fill Page Height – Pure CSS Solutions

  1. Hi Utz,

    I haven’t tried overriding header and footer border; it could be the reason for the “unknown” pixel. However, since both are “border-box”, border and padding shouldn’t be calculate, not sure though.

    Thanks 🙂

  2. Thank you, too!
    i was also messing around with this for a while…

    Your »missing pixel« might be in the jquery.mobile.css-Header, which is:
    .ui-header, .ui-footer { border-width: 1px 0px; … }

    Is that right?
    cheers

  3. Thank you very much!!!!!

    Tried so many things and nothing worked until I found your page ( height: inherit; /* the trick */).

    Made my day!

    Regards,
    Jaier

  4. Pingback: Content “div” Height – Fill Page Height | jQuery Mobile Tricks

Drop me a line or two ;)

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

WordPress.com Logo

You are commenting using your WordPress.com 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