0

我的包装器 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 盒子阴影）： 

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

4

5 回答 5

2

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

于 2012-08-23T12:00:54.167 回答
0

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

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

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

于 2012-08-23T12:04:33.010 回答
0

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

<div id="sidebar">
        some sidebar stuff like login form
    </div>
于 2012-08-23T12:05:36.767 回答
0

您应该阅读这篇关于浮动的文章，尤其是“清除浮动”部分。

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

于 2012-08-23T12:05:47.530 回答
0

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

css 框模型不使用填充进行拉伸

于 2012-08-23T12:28:35.353 回答