jQuery mobile page height

Question

For the past day I have been trying to figure out how to change the min-height styling on a jQuery mobile page when viewing in mobile safari. I have tried, inline styles, ov

Answer 1

The min-height of the data-role="page" element is set via JavaScript in a resize event handler for the window object. You can create your own JavaScript that resizes the page differently:

$(function () {
    $(window).bind('resize', function (event) {
        var content_height = $.mobile.activePage.children('[data-role="content"]').height(),
            header_height  = $.mobile.activePage.children('[data-role="header"]').height(),
            footer_height  = $.mobile.activePage.children('[data-role="footer"]').height(),
            window_height  = $(this).height();

        if (content_height < (window_height - header_height - footer_height)) {
            $.mobile.activePage.css('min-height', (content_height + header_height + footer_height));
            setTimeout(function () {
                $.mobile.activePage.children('[data-role="footer"]').css('top', 0);
            }, 500);
        }
        event.stopImmediatePropagation();
    }).trigger('resize');
});

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

Notice the setTimeout used to set the fixed-position-footer; the timeout duration can probably be made smaller. This is used because the jQuery Mobile Framework was re-positioning the fixed-position-footer back to the bottom of the page. An example of this can be seen here: http://jsfiddle.net/sAs5z/

Another note, you may want to only re-position the fixed-position-footer element and leave the page's min-height property the same; this will make the page gradient cover the whole screen but the footer won't have any space between it and the content. Here is a demo of this method: http://jsfiddle.net/sAs5z/2/