jQuery移动视口高度[重复]答案

【问题标题】：jQuery mobile viewport height [duplicate]jQuery移动视口高度[重复]
【发布时间】：2014-02-28 18:44:09
【问题描述】：

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

【问题讨论】：

标签： html css jquery-mobile

【解决方案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();
});

【讨论】：

非常感谢！几天来一直在寻找这样的页面！如此简单。
您可能应该发布一个单独的问题，但您可以查找“响应式字体”或“响应式排版”。您可能最终会使用媒体查询来更改较小高度的字体大小，或者您可以使用 javascript...