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, overriding ui-page styles and have yet to find a way to override the height of data-role="page". Ideally if the page "content" is less than the "page" height I would like the "page" height to automatically adjust to the "content". I have attached an illustration to better explain the issue.

<div data-role="page">
     <div data-role="header">
             Header Elements
     </div>
     <div data-role="content" class="homeNav">
            <ul data-role="listview" data-inset="false" data-filter="false">
                <li><a href="expertise.html">Expertise</a></li>
                <li><a href="greatesthits.html">Greatest Hits</a></li>
                <li><a href="profile.html">Profile</a></li>
                <li><a href="mindset.html">Mindset</a></li>
                <li><a href="connect.html">Connect</a></li>
             </ul>  
     </div><!-- /content -->

     <div data-role="footer" data-position="fixed">
             Footer elements
     </div><!-- /footer -->
</div><!-- /page -->

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/

Answer 2

Old ticket but I have a solution which I prefer more. It specifically unbinds the resize event through some jQuery internals hacking. I don't like Jasper's solution because it depends on one event firing to block another, and events in theory should never know about each other / you should never depend on the order in which events fire.

$(function() {
    // WARNING: Extremely hacky code ahead. jQuery mobile automatically
    // sets the current "page" height on page resize. We need to unbind the
    // resize function ONLY and reset all pages back to auto min-height.
    // This is specific to jquery 1.8

    // First reset all pages to normal
    $('[data-role="page"]').css('min-height', 'auto');

    // Is this the function we want to unbind?
    var check = function(func) {
        var f = func.toLocaleString ? func.toLocaleString() : func.toString();
        // func.name will catch unminified jquery mobile. otherwise see if
        // the function body contains two very suspect strings
        if(func.name === 'resetActivePageHeight' || (f.indexOf('padding-top') > -1 && f.indexOf('min-height'))) {
            return true;
        }
    };

    // First try to unbind the document pageshow event
    try {
        // This is a hack in jquery 1.8 to get events bound to a specific node
        var dHandlers = $._data(document).events.pageshow;

        for(x = 0; x < dHandlers.length; x++) {
            if(check(dHandlers[x].handler)) {
                $(document).unbind('pageshow', dHandlers[x]);
                break;
            }
        }
    } catch(e) {}

    // Then try to unbind the window handler
    try {
        var wHandlers = $._data(window).events.throttledresize;

        for(x = 0; x < wHandlers.length; x++) {
            if(check(wHandlers[x].handler)) {
                $(window).unbind('throttledresize', wHandlers[x]);
                break;
            }
        }
    } catch(e) {}
});