Content “div” Height – Fill Page Height–Part 2

Omar has written a great article already on using JavaScript to size the jQM content DIV to fill the given device’s height; however there is one use case this does not cover. A user might want the footer to be visible and fixed  at the bottom of the page anytime the content of the page is shorter than the vertical space available, but once the content is long enough, the user might then want the footer to be “pushed” down so it appears below the content when the page is scrolled.

The part 1 article makes it so that the footer is always visible at the bottom of the page and the content div is scrolled. If instead we use a plain footer with no JavaScript and without the data-position fixed, the footer appears below the content, but if the content is less than the vertical space available, the footer appears in the middle of the page:

floatingFooter

Using data-position=”fixed” on the footer stops the footer from appearing in the middle of the page, but prevents it from being “pushed” down with longer content:

fixedFooter
The trick to make this work is to use the same calculation from the original article to get the available space of the content, but instead of setting the height of the content DIV, we set the CSS min-height attribute. Continue reading