我正在构建响应式网站。我不想设置默认高度(以 px 为单位)，但我想这样做。这只是布局的顶部。例如。 prowly.com .
还有我的 fiddle :
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>
诗。正如我还看到的，100% 的高度在 Safari iPhone 和 Opera Mobile 上有问题，所以我不知道该怎么办。我当然可以使用JS，但我想知道还有其他方法吗？
最佳答案
你需要像这样设置正文
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%;
}
关于html - 高度超过浏览器高度的 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18449082/