Question

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

我该如何解决这个问题？

Answer 1

获得100％的工作高度对于跨浏览器来说是很棘手的 - 你必须在最外面的元素上做到这一点。我的建议是尝试类似下面的代码，其中#wrap div设置为浏览器窗口的100％高度，并包含.top div 200px高，其背景颜色与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>

Answer 2

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

here

我将其更改为亲戚并为其添加了宽度。

// // EDIT

jsfiddle here

这可以通过min-height和max-height

来完成

// // EDIT2

enter link description here给包装器一个最小 - 最大高度

w3school explenation positions

Answer 3

如何使用

overflow: scroll;

当文本变得太大时，这会向div添加一个滚动条，我猜你正在追求它。

Answer 4

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

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

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

CSS高度100％，保证金

4 个答案: