CSS 高度 100% 带边距答案

【问题标题】：CSS height 100% with marginCSS 高度 100% 带边距
【发布时间】：2013-05-02 18:35:29
【问题描述】：

我正在尝试显示一个与浏览器窗口具有相同高度的 div，但在顶部使用 200 像素的边距。所以，起初我尝试使用 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/

我该如何解决这个问题？

【问题讨论】：

不确定你到底需要什么，但这里可能是由 position: absolute;
肯定是绝对位置造成的。这正是我的问题：我想要一个与页面高度一样的 div（顶部有边距），但是当其中有更多文本时它应该变得更大。

标签： css height margin

【解决方案1】：

让 100% 的高度正常工作很难获得正确的跨浏览器——而且你必须在最外层的元素上做到这一点。我的建议是尝试类似下面的代码，其中 #wrap div 设置为浏览器窗口的 100% 高度，并包含一个 200px 高的 .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>

【讨论】：

谢谢！这是该线程中唯一涵盖两种情况（文本少，文本多）的解决方案！

【解决方案2】：

如何使用

overflow: scroll;

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

【讨论】：

不，我想要一个与网站高度一样的 div，但是当其中有更多文本时它应该变得更大。

【解决方案3】：

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

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

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

【讨论】：

不行不行：看看这里：jsfiddle.net/JHjkJ/1 div 现在是 100%+20px 高度。

【解决方案4】：

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

here

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

//编辑//

jsfiddle here

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

//EDIT2//

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

w3school explenation positions

【讨论】：

没错。但这里的问题是，当文本很少时，div get 的高度与网站的高度不同：jsfiddle.net/fB9ea/3
这可以通过 min-height 和 max-height 查看更新的 awnser！
@charihans 再次检查。我还给了包装器一个 min-max-height