j查询移动视口高度

我有一个使用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>

阅读以下内容： http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/

演示

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

相关内容

最新更新

热门标签：