Question

我有一个使用jquery mobile创建的移动网页，其中包含一个标题和4个div。标题占据页面的10％，后面的90％与div一样。我有以下代码，但我似乎无法填写页面。我做了一些研究，我相信这可能与内容小于页面高度有关，所以我尝试使用jquery将页面高度设置为视口高度无济于事。我有什么想法可能做错了吗？

<!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>

Answer 1

阅读本文：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);
}

您还需要在窗口调整大小和方向更改时触发此操作：

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

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

jQuery移动视口高度

1 个答案: