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

Continue reading