DIV HEIGHT – FILL PAGE HEIGHT

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 */
}


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);
}

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 */
}