0

我一直在努力为我正在从事的项目在 DIV 上实现 100% [窗口] 高度。它在桌面上运行良好，但是当我尝试使用 iPhone 4 或 Android 手机加载它时，第一个 div 似乎是 100%；但是每个后续的 DIV 似乎都短了大约 50 个像素（只是一个估计值）。

我尝试通过执行以下操作通过 css 设置它：

<!DOCTYPE html>
<head>
<style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;

    div#container {
        width: 100%;
        height: 100%;
    }

    div#section1 {
        width: 100%;
        height: 100%;
        background-color: blue;
    }

    div#section2 {
        width: 100%;
        height: 100%;
        background-color: red;
    }
</style>
</head>
<body>
    <div id="container>
        <div id="section1">
            . . .
        </div>
        <div id="section2">
            . . .
        </div>
    </div>
</body>
</html>

我还尝试使用类似于 jQuery 的 javascript 来设置它：

var browser_width = $(window).width();
var browser_height = $(window).height();

$(document).ready(function(){
    $("#section1, #section2").css("width", browser_width, "height", browser_height);
});

但它的行为方式与 CSS 相同。谁能指出我正确的方向？

4

1 回答 1

0

you have to set the right format to the .css() method in your script

$(document).ready(function(){
  $("#section1, #section2").css({
     "width" : browser_width, 
     "height" : browser_height
   }); //css
});

UPDATE : also I noticed you forgot to close your first css declaration

html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;

... the closing bracket } is missing.

Side note : I wouldn't set dimension properties to the html and/or body tags to avoid unexpected results ... unless you know what you are doing

于 2012-11-12T00:12:12.420 回答