jQM 1.4 page sizing header 4 divs

by Erik Zanker

HTML

<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<div data-role="page" id="home">
    <div data-role="header" id="header" data-tap-toggle="false">
        <h3>Header</h3>
    </div>
    <div data-role="content" class="content">
        <div id="box1" class="box">box1</div>
        <div id="box2" class="box">box2</div>
        <div id="box3" class="box">box3</div>
        <div id="box4" class="box">box4</div>
    </div>
</div>

CSS

#header {
    height:10%;
}
.content {
    margin: 0px;
    padding:0px;
}
.box{
    width:100%;
    height:25%;
    border: solid 1px #000000;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
}
#box1 {
    background-color: red;
}
#box2 {
    background-color: green;
}
#box3 {
    background-color: blue;
 }
#box4 {
    background-color: orange;
}

JavaScript

$(document).on("pageshow", "#home", function () {
    SetHeightOfDiv();

});

$(window).on("resize orientationchange", function () {
    SetHeightOfDiv();
});


function SetHeightOfDiv() {
    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();

    /* content div has padding of 1em = 16px (32px top+bottom). This step
   can be skipped by subtracting 32px from content var directly. */
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

    var content = screen - header - footer - contentCurrent;

    $(".ui-content").height(content);
}