Scale jQM to device Height

by Erik Zanker

HTML

<div data-role="page" id="page1">
    <div id="jqmHeader" data-role="header" >
         <h1>My page</h1> 
    </div>
    <div id="jqmContent" data-role="content" >
        <ul data-role="listview" data-inset="true">
            <li><a href="#">Acura</a>
            </li>
            <li><a href="#">Audi</a>
            </li>
            <li><a href="#">BMW</a>
            </li>
            <li><a href="#">Cadillac</a>
            </li>
            <li><a href="#">Ferrari</a>
            </li>
        </ul>
    </div>
    <div id="jqmFooter" data-role="footer"> <a href="#" data-role="button">Footer Button</a>

    </div>
</div>

CSS

html, body {
    margin: 0;
    padding : 0;
}

JavaScript

function ScaleContentToDevice() {
    scroll(0, 0);
    var headerHeight = $("#jqmHeader:visible").outerHeight();
    var footerHeight = $("#jqmFooter:visible").outerHeight();
    var viewportHeight = $(window).height();
       
    var content = $("#jqmContent:visible");
    var contentMargins =  content.outerHeight() - content.height();
    
    var contentheight = viewportHeight - headerHeight - footerHeight - contentMargins;
    
    content.height(contentheight);
};

$(document).on("pageshow", function(){
    ScaleContentToDevice();
});