Question

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

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

<!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相同。有人能指出我正确的方向吗？

Answer 1

您必须将正确的格式设置为脚本中的.css()方法

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

更新：我也注意到你忘了关闭你的第一个css声明

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

...缺少右括号}。

旁注：我不会将维度属性设置为html和/或body标记以避免意外结果......除非您知道自己在做什么

如何在iPhone上实现DIV的100％[窗口]高度？

1 个答案: