Div 不按内容扩展答案

【问题标题】：Div not expanding by contentDiv 不按内容扩展
【发布时间】：2012-08-23 20:28:35
【问题描述】：

我的包装器 div 的高度没有随着它的内容而扩展。另一方面，它通过页面上的标题 div 和导航 div 进行扩展，但不是通过位于另一个 div 内的侧边栏进行扩展。这是 HTML：

<div id="wrapper">
    <div id="header">
    </div>
    <div id="nav">
        nav content goes here
    </div>
    <div id="pagecontent">
    <div id="sidebar">
        some sidebar stuff like login form
    </div>
    </div>
</div>

和CSS（只有必要的css，不像webkit box shadows）：

#wrapper {
    width: 900px;
    margin: 0 auto;
    padding-bottom: 80px;
}
#header {
    height: 160px;
    width: 100%;
}
#nav {
    width: 100%;
    height: 40px;
}
#sidebar {
    float: right;
    width: 140px;
    height: 100%;
}
#pagecontent {
    width: 900px;
}

高度为 100% 的侧边栏位于包装 div 之外，您可以在 http://craftersinn.net 上查看它

【问题讨论】：

侧边栏是“浮动的”，因此更像是一个绝对定位的元素。
在你的CSS中你为#content创建了一个规则，而html元素的id是pagecontent
@finst33：请参阅下面的答案。
哎呀，id 的 :P 一定是滑倒了，而且 html 不是从我的页面复制的，我只是输入了所有的 div。不会漏掉真实代码中的一个
，就在这里。

标签： html css height

【解决方案1】：

您错过了在 #wrapper css 中添加 css 规则 overflow:hidden。

【讨论】：

谢谢你的好心先生的回答 :) 帮助很大

【解决方案2】：

将 overflow: hidden; 添加到您的包装 CSS 中，同时确保您的选择器实际上是在选择元素：

<div id="pagecontent">// remove page
#content {

http://jsfiddle.net/Kyle_Sevenoaks/bPT49/

【讨论】：

【解决方案3】：

在

之后添加<div style="clear: both;"></div>

<div id="sidebar">
        some sidebar stuff like login form
    </div>

【讨论】：

【解决方案4】：

您应该阅读 this article 关于浮点数的内容，尤其是“清除浮点数”部分。

简而言之，您可以使用clear: both、overflow: hidden 或 clearfix 方法。祝你好运！

【讨论】：

【解决方案5】：

这里讨论了同样的问题。检查清除浮动解决方案和关于溢出的解释：隐藏；

css box model does not stretch using padding

【讨论】：