[css] jQuery Mobile: Stick footer to bottom of page

Is there any way, bearing in mind the way the jQuery Mobile framework operates, to fix the page so that the footer always aligns with the bottom of the page - no matter the height.

As it stands the height of a jQuery page will change, especially as devices are rotated portrait to landscape, so the solution would have to take this into account.

Just to clarify - I don't need the footer to be at the bottom of viewport, just working so that the default page height doesn't drop below the viewport height.

Thanks.

Since this issue is kind of old a lot of things have changed.

You can now get this behavior by adding this to the footer div

data-position="fixed"

More info here: http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

Also beware, if you use the previously mentioned CSS together with the new JQM solution you will NOT get the appropriate behavior!

http://ryanfait.com/sticky-footer/

You could possibly use this and use jQuery to update the css height of the elements to make sure it stays in place.

jQm offers:

• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/docs-footers.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fixed.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fullscreen.html
• http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/footer-persist-a.html

None of these work?

In my case, I needed to use something like this to keep the footer pinned down at the bottom if there is not much content, but not floating on top of everything constantly like data-position="fixed" seems to do...

.ui-content
{
    margin-bottom:75px; /* Set this to whatever your footer size is... */
}

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

Adding the data-position="fixed" and adding the below style in the css will fix the issue z-index: 1;

The following lines work just fine...

var headerHeight = $( '#header' ).height();
var footerHeight = $( '#footer' ).height();
var footerTop = $( '#footer' ).offset().top;
var height = ( footerTop - ( headerHeight + footerHeight ) );
$( '#content' ).height( height );

I thought I'd share my CSS only solution here. This way you can avoid the extra overhead of using JS for this.

This isn't a fixed position footer. The footer will be offscreen if the page content is taller than the screen. I think it looks better this way.

The body and .ui-page min-height and height are necessary to prevent the footer from jumping up and down during transitions.

Works with the latest JQM version as of now, 1.4.0

body,
.ui-page {
    min-height:100% !important;
    height:auto !important;
}

.ui-content {
    margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */
}

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

This script seemed to work for me...

$(function(){
    checkWindowHeight();
    $(document).bind('orientationchange',function(event){
        checkWindowHeight();
    })
});

function checkWindowHeight(){
        $('[data-role=content]').each(function(){
        var containerHeight = parseInt($(this).css('height'));
        var windowHeight = parseInt(window.innerHeight);
        if(containerHeight+118 < windowHeight){
            var newHeight = windowHeight-118;
            $(this).css('min-height', newHeight+'px');
        }
    });
}

Fixed basics

To enable this behavior on a header or footer, add the data-position="fixed" attribute to a jQuery Mobile header or footer element.

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>