我正在尝试显示与浏览器窗口具有相同高度的div,但在顶部使用200px的边距。因此,起初我尝试使用身高:100%;但这不能保证页边空白,因为div变得比浏览器窗口大。
然后我尝试了:
div {
background: red;
position: absolute;
top: 20px;
bottom: 0;
height: auto;
}
您可以在这里看到很好的效果:http://jsfiddle.net/fB9ea/1/
问题是:如果有太多文本以至于它变得比div大,则该文本会伸出div,如您在此处看到的:http://jsfiddle.net/fB9ea/
我该如何解决该问题?
最佳答案
要获得100%的高度才能正常使用跨浏览器,而且必须在最外面的元素上做到这一点。我的建议是尝试下面的代码,其中#wrap
div设置为浏览器窗口高度的100%,并包含一个200像素高的.top
div,其背景颜色与body元素相同:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {
height:100%;
}
html,body {
margin:0;padding:0;
}
#wrap {
min-height:100%;
background: red;
width: 50%;
margin: 0 auto;
}
* html #wrap {height:100%;}
.top {
height: 200px;
background: white;
}
</style>
</head>
<body>
<div id="wrap">
<div class="top">
</div>
Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />Test<br />
</div>
</body>
</html>