CSS嵌套div高度100%

Question

我目前将 #border div 的高度设置为页面的100％，但是试图使 #container div 在 #border 内部拉伸到100％。目前，#container 仅会根据其内部内容进行拉伸。

* {
    margin: 0;
}

html, body {
    height:100%;
    font-family: Georgia, Times, "Times New Roman", serif;
    font-size:13px;
    line-height:19px;
    color:#333333;
    background: #f5f1ec;
    text-align: left;
}

#border {
    background: #f5f1ec;
    border:solid 1px #FFFFFF; 
    width: 880px;
    margin: 40px auto 0;
    padding:10px;
    height: auto !important;
    min-height: 100%;
    height: 100%;
}

#container {
    background: #FFFFFF;
    padding: 10px 50px 0;
    height: 100%;
}

- Aaron Moodie

---

抱歉，各位，问题中应该是#container而不是#content。 - Aaron Moodie

Answer 1

解决：

#container {
    background: #FFFFFF;
    padding: 10px 50px 0;
    height: 100%;
    width:780px;
    position:absolute;
}

- Starx

---

谢谢Starx。我完全放弃了之前的做法，现在这个方法很好用。我还想在底部加一个页脚，并让边框在那里停止，所以可能需要重新设计我的布局。不过还是感谢你的帮助。 - Aaron Moodie

添加position:absolute确实使嵌套的div填充了整个高度，但对我来说它也导致了超出整个高度。有什么想法吗？我不希望在不需要滚动条的页面上出现滚动条。 - Jeremy Hicks

这实际上是由于body的margin和padding可能被设置为0，如果问题仍然存在，请尝试在body中设置overflow:hidden，它会解决问题。 - Starx

Answer 2

尝试使用以下代码：#container{min-height:inherit;position:absolute;}并将overflow:hidden;添加到#border。

- edl

---

抱歉，您在顶部的描述中放置了 #content。 - edl

嘿，EDL，我的意思是内容，就是内容（这是一个标准的两列博客布局）。 - Aaron Moodie