jQuery mobile viewport height

Question

I have a mobile webpage created using jquery mobile which contains a header and 4 divs. The header is to occupy 10% of the page with the following 90% filled equally with the divs. I have the following code but I can't seem to get it to fill the page. I've done some research and I believe this may be to do with the content being less than the height of the page so I've tried setting the page height to the viewport height using jquery to no avail. Any ideas what I may be doing wrong?

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="css/jquery.mobile-1.4.0.css"/>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.4.0.min.js"></script>
    <style>
        #header
        {
            height:10%;
        }
        .content
        {
            height: 90%;
            margin: 0px;
            padding:0px; 
        }

        #box1
        {
            width:100%;
            height:22%;
            border: solid 1px #000000;
            position: relative;
            background-color: red;
        }

        #box2
        {
            width:100%;
            height:22%;
            border: solid 1px #000000;
            position: relative;
            background-color: green;
        }

        #box3
        {
            width:100%;
            height:22%;
            border: solid 1px #000000;
            position: relative;
            background-color: blue;
        }

        #box4
        {
            width:100%;
            height:22%;
            border: solid 1px #000000;
            position: relative;
            background-color: orange;
        }
    </style>

    <script type="text/javascript">
        function SetHeightOfDiv(){
            var viewportHeight = $(window).height();
            var theDiv = document.getElementById('home');
            theDiv.style.height = viewportHeight + "px";
        }
    </script>
</head>
<body onload="SetHeightOfDiv()">
    <div data-role="page" id ="home">  

        <div data-role="header" id="header" data-tap-toggle="false"></div>

        <div data-role="content" class ="content">

            <div id="box1">
            </div>

            <div id="box2">
            </div>

            <div id="box3">
            </div>
            <div id="box4">
            </div>
        </div>  
    </div>
 </body>
 </html>

score 1 · Accepted Answer · answered Feb 28 '14 at 19:20

Read this: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/

DEMO

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);
}

You also need to trigger this on window resize and orientationchange:

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

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

Perfect thanks! Been searching for a page like that for days now! So simple. — user3366069, Feb 28 '14 at 19:37
You should probably post a separate question, but you can look up "responsive font" or "responsive typography". You will probably end up using Media queries to change the font-size at smaller heights, or you could do it with javascript... — ezanker, Feb 28 '14 at 19:58

jQuery mobile viewport height

1 Answers1