Jquery Mobile Sticky Footer

I want a footer in Jquery Mobile, that is not fixed, but is always at the bottom of the page.

Like this: http://ryanfait.com/sticky-footer/ (but in JQuery Mobile), not like like the standard JQuery Mobile Fixed footers.

So the footer should appear at the end of the content, or the bottom of the screen, whichever is lower.

Any ideas on how to approach this?

Edit:

The basic problem, is that I seem unable to get the div with data-role=content to actually take up the full height of the screen.

Solution

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/