jQuery mobile panel between header and footer

Question

jQuery mobile panel usually convers part of the page from top to bottom:

...

The demos page has

Answer 1

You need first to calculate height of viewport, header and footer. Subtract height of both toolbars from viewport's height will give you the height of space between both toolbars. Also, push the panel down by overriding top style of the panel.

    /* active page */
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
    /* viewport */
    screen = $.mobile.getScreenHeight(),
    /* header - whether it's fixed */
    header = $(".ui-header", activePage).hasClass("ui-header-fixed") ? $(".ui-header", activePage).outerHeight() - 1 : $(".ui-header", activePage).outerHeight(),
    /* footer - whether it's fixed */
    footer = $(".ui-footer", activePage).hasClass("ui-footer-fixed") ? $(".ui-footer", activePage).outerHeight() - 1 : $(".ui-footer", activePage).outerHeight(),
    /* math 101 */
    panelheight = screen - header - footer;
/* update "min-height" and "top" */
$('#panelID').css({
    'top': header,
        'min-height': panelheight
});

Demo