jquery/jquery-mobile — Issue #3443: Suggestion: data-position = bottom for footer
Author: softshape
Created: 2012-01-17 11:51:19+00:00
State: open

The task to make the page fill the whole page is quite common; for example, maps, short lists etc. - many page types require the footer sticks the bottom. Also, this gives a web page more "application" look. The behavior is different from data-position = fixed:

1) if the page height is less than viewport height, the footer is placed on the viewport's bottom.
2) if the page height is more that viewport (long lists etc), the footer goes to the page's bottom, not covering the page content as "fixed" does.

The solution is CSS-based and it's one-liner -

.ui-footer {bottom:0; position:absolute !important; top: auto !important; width:100%;}

This is quite common task, debated over different blogs, so I'd suggest to add to JQM data-position attribute "data-position = bottom" which would apply this CSS to the footer.