Content div 100% - No fixed toolbars

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div data-role="page" data-theme="a" id="p1">
    <div data-role="header"  data-tap-toggle="false" data-theme="b">
         <h1>Header</h1>

    </div>
    <div role="main" class="ui-content" data-theme="a">
        <div class="ui-body ui-body-a ui-corner-all">
            
<h3>Heading</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
        </div>
    </div>
    <div data-role="footer"  data-tap-toggle="false" data-theme="b">
         <h1>Footer</h1>

    </div>
</div>

CSS

.ui-page {
    background-color: red !important;
}
.ui-content {
    background: transparent url(http://brandthunder.com/wp/wp-content/uploads/2011/11/Mac_Desktop_Background.jpg);
    background-size : 100% 100%;
    color:#FFFFFF;
    text-shadow:1px 1px 1px #000000;
}

JavaScript

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").height(content);