Jquery Mobile Sticky Footer

jQuery Mobile: Stick footer to bottom of page

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/

Jquery Mobile Sticky Footer

Basically you just need to check the height of each data-role="content" elements to make sure that with the header/footer/content-area that the vertical space in the view-port is used.

For example:

$(document).on("pageshow", ".ui-page", function () {
    var $page  = $(this),
        vSpace = $page.children('.ui-header').outerHeight() + $page.children('.ui-footer').outerHeight() + $page.children('.ui-content').height();

    if (vSpace < $(window).height()) {
        var vDiff = $(window).height() - $page.children('.ui-header').outerHeight() - $page.children('.ui-footer').outerHeight() - 30;//minus thirty for margin
        $page.children('.ui-content').height(vDiff);
    }
});​

This code will run each time a page is navigated-to.

Here is a demo: http://jsfiddle.net/aBVtJ/1/

Sticky Footer W/JQuery Mobile

jQuery Mobile has a native footer that supports a fixed, or 'sticky', position. An example and documentation can be found at http://view.jquerymobile.com/1.3.1/dist/demos/widgets/fixed-toolbars/

How do I make a sticky footer with jquerymobile?

The closest I have come is the following CSS rule:

[data-role=footer] {
    bottom: 0;
    position: absolute;
    width: 100%;
}

If you know a better way, please post an answer!

How to have footer always at the bottom of page?

jquery mobile approach - <div data-role="footer" data-position="fixed">

How to fix jQuery Mobile's fixed footer?

If using 1.1 or later, add data-tap-toggle="false" to your header and footer, as documented here.

If you're using a version of jQuery Mobile prior to 1.1, place the following before loading jQuery Mobile:

$(document).bind("mobileinit", function(){
  $.mobile.touchOverflowEnabled = true;
}); // remove

jquery mobile static footer navbar

This is fixed in jQueryMobile 1.1 rc1. See this link

Use data-tap-toggle="false" on your footer.

---

Related Topics