Question

我正在建立响应式网站。我不想在px中设置默认高度，但我想要这样的东西。这将只是布局的顶部。例如。 prowly.com

enter image description here

我的小提琴：

http://jsfiddle.net/QVxW8/1/

        html, body {
            margin: 0;
            padding:0;
        }
        div#handler {
            width: 100%;
            height: 110%;
            display:block;
        }
        div#content {
            width: 100%;
            height:100%;
            background: red;
        }
        div#content2 {
            width: 100%;
            height: 10%;
            background: blue;
        }

HTML

<body>
    <div id="handler">
        <div id="content">I want to 100% height of browser</div>
        <div id="content2">I want 10% of height browser</div>
    </div>
</body>

聚苯乙烯。正如我所看到的那样，在Safari iPhone和Opera Mobile上有100％的高度，所以我不知道该怎么做。当然我可以使用JS，但我想知道还有其他方法吗？

Answer 1

尝试在html, body中添加100％的高度，如下所示：

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

JSFIDDLE

编辑：您可能需要阅读this文章。

Answer 2

你需要像这样设置身体

html, body {
                margin: 0;
                padding:0;
                position:absolute;/* this is very important*/
                bottom:0;
                top:0;
                right:0;
                left:0;
            }

演示：http://jsfiddle.net/QVxW8/5/

或者像这样：

html, body {
                margin: 0;
                padding:0;
                position:absolute;/* this is very important*/
                left:0;
                top:0;
                width:100%;
                height:100%;
            }

并使用正确的值

*{
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

或只是将代码更改为

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

演示：http://jsfiddle.net/QVxW8/6/

Answer 3

试试这个

*{padding: 0; marign:0;}
      html, body {
            margin: 0;
            padding:0;
        }
        div#handler {
            width: 100%;
            height: 110%;
            display:block;
        }
        div#content {
            width: 100%;
            height:100%;
            background: red;
        }
        div#content2 {
            width: 100%;
            height: 10%;
            background: blue;
        }

Answer 4

   html, body {
        margin: 0;
        padding:0;
    }
    div#handler {
        width: 100%;
        height: 100vh;
        display:block;
    }
    div#content {
        width: 100%;
        height:90%;
        background: red;
    }
    div#content2 {
        width: 100%;
        height: 10%;
        background: blue;
    }

此处的窍门是使用VH表示设备高度或使用VW表示设备宽度，而不是％或px

高度超过浏览器高度的100％

4 个答案: