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.

Before

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.

After

Full height

Continue reading

Advertisements