Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 808
Sergio Avatar asked Jul 28 '11 15:07

Sergio


4 Answers

You can add this in your css file:

[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}  

So the page data-role now have 100% height, and footer is in absolute position.

Also Yappo have wrote an excellent plugin that you can find here: jQuery Mobile in a iScroll plugin http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html

hope you found the answer!

An answer update

You can now use the data-position="fixed" attribute to keep your footer element on the bottom.
Docs and demos: http://view.jquerymobile.com/master/demos/toolbar-fixed/

like image 65
Philip Avatar answered Nov 09 '22 13:11

Philip


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!

like image 62
Nicklas Gnejs Eriksson Avatar answered Nov 09 '22 12:11

Nicklas Gnejs Eriksson


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%;
}
like image 15
jocull Avatar answered Nov 09 '22 11:11

jocull


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>
like image 5
Pedro Lobito Avatar answered Nov 09 '22 12:11

Pedro Lobito