Question

我的包装div不会因其内容而在高度上扩展。另一方面，它通过页面上的标题div和nav 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框阴影）：

#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上查看

Answer 1

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

Answer 2

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

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

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

Answer 3

在

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

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

Answer 4

你应该阅读关于花车的this article，特别是“清除花车”一节。

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

Answer 5

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

css box model does not stretch using padding

Div不按内容扩展

5 个答案: