1

我正在尝试显示一个与浏览器窗口具有相同高度的 div，但在顶部使用 200px 边距。所以，起初我尝试使用 height: 100%; 但这不适用于边距，因为 div 比浏览器窗口大。

然后我尝试了：

div {
  background: red;
  position: absolute;
  top: 20px;
  bottom: 0;
  height: auto;
}

这很好用，你可以在这里看到：http: //jsfiddle.net/fB9ea/1/

问题是：如果文本太多以至于它比 div 大，则文本会从 div 中伸出，您可以在此处看到：http: //jsfiddle.net/fB9ea/

我该如何解决这个问题？

4

4 回答 4

1

让 100% 的高度正常工作很难获得正确的跨浏览器——你必须在最外层的元素上做到这一点。我的建议是尝试类似下面的代码，其中#wrapdiv 设置为浏览器窗口的 100% 高度，并包含一个.top200px 高的 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>
于 2013-05-02T10:00:36.657 回答
0

这是因为.div检查这个小提琴的绝对位置：

这里

我将其更改为相对并为其添加了宽度。

//编辑//

jsfiddle在这里

这可以通过 min-height 和 max-height 来完成

//编辑2//

在这里输入链接描述给包装器一个最小-最大高度

w3school 解释职位

于 2013-05-02T09:41:14.713 回答
0

怎么用

overflow: scroll;

当文本变得太大时，这将在 div 中添加一个滚动条，我猜这就是你所追求的。

于 2013-05-02T09:42:13.500 回答
0

您可以使用 轻松解决此问题min-height。这将确保您的 div 至少是页面高度的 100%，但是当有更多文本时它会增长。您的代码将如下所示：

div {
    background: red;
    position: absolute;
    top: 20px;
    min-height: 100%;
    height: auto;
}

http://jsfiddle.net/dakoder/JHjkJ/

于 2013-05-02T10:13:20.707 回答