html - Div 不按内容扩展

Question

我的包装器 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 上查看它

Answer 1

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