jQM 1.4 Content Min-Height

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="page1" >
    <div data-role="header" data-theme="b" data-position="fixed">
         <h1>Page 1 Short Content</h1> 
        <a href="#page2">Page 2</a>
    </div>
    <div role="main" class="ui-content" >
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit suscipit malesuada. Donec lobortis, quam eu viverra lobortis, leo urna fermentum orci, vitae elementum orci ipsum id arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vulputate vulputate lacus non tempor. Donec nec consequat nunc, bibendum elementum urna. Aliquam aliquet diam magna, vestibulum dignissim velit laoreet in. Sed eget iaculis augue. Duis sed enim iaculis, aliquet nisl vitae, hendrerit turpis. Phasellus commodo dui vel libero porta gravida. Maecenas id dapibus tellus, id accumsan felis. Fusce at leo vel metus mollis aliquet nec vitae erat. Nulla varius, libero a aliquet tristique, lectus nisi accumsan est, eget rhoncus diam lectus vitae nunc. Sed massa elit, varius eu nulla sit amet, imperdiet mattis ligula.</p>       
     
    </div>
    <div data-role="footer" data-theme="b">
         <h1>I am the page 1 footer</h1> 
    </div>
</div>

<div data-role="page" id="page2" >
    <div data-role="header" data-theme="b" data-position="fixed">
         <h1>Page 2 Long Content</h1> 
        <a href="#page1">Page 1</a>
    </div>
    <div role="main" class="ui-content" >
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit suscipit malesuada. Donec lobortis, quam eu viverra lobortis, leo urna fermentum orci, vitae elementum orci ipsum id arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce vulputate vulputate lacus non tempor. Donec nec...

JavaScript

function contentHeight() {
    var screen = $.mobile.getScreenHeight();
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

    var content = screen - header - footer - contentCurrent;
    $(".ui-content").css("min-height", content + "px");
}

$(document).on("pagecontainertransition", contentHeight);
$(window).on("throttledresize orientationchange", contentHeight);