我正在尝试显示与浏览器窗口具有相同高度的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>

10-06 04:14
查看更多