html - 将 div 元素的高度应用为与其中的 div 一样多

Question

基本上，我的 CSS 结构由一个容器组成，其中包含背景和侧边框。在这个容器中，我插入了我的 div 元素(标题、导航、侧边菜单......)在它的底部，我包括我的页脚(现在不重要)。我的问题是，我无法真正调整容器的高度。我希望它自动与其中最长的 div 元素(通常是中心列)一样多。下图以 400px 的固定高度表示所有这些。

http://tinypic.com/view.php?pic=2qnw8pv&s=8#.U5nZAyhqNuB

这是CSS代码:

容器:

#pagewidth{
    position: relative;
    width: 1000px;
    text-align:left;
    margin: 0 auto;
    height: 400px;
    border-top: 1px solid #354350;
    border-left: 1px solid #354350;
    border-right: 1px solid #354350;
    background-color:#0f0f0f;
    }

标题:

#header {
    position: relative;
    float: left;
    height:150px;
    width: 100%;
    display: block;
    background-image:url('images/logo2.png');
    /*border-bottom: 1px solid #354350; */
    }

列结构:

    #columns {
    width: 100%;
    position: relative;
    }

 #leftmenu {
    position: relative;
    width: 17%;
    float: left;
    }

#twocols {
    position: relative;
    width: 81%;
    float: right;
    }

#centercol {
    position: relative;
    width: 67%;
    float: left;
    }
#rightmenu {
    position: relative;
    width: 20%;
    float:right;
    }

最后是页脚:

#footer{
 height: 30px;
 clear: both;
 position: relative;
 display: block;
 overflow: auto;
 background-color: #F8F4F4;
 width: 100%;
 border-top: 2px solid #E8E8E8;

P.S - 我没有添加导航和类似表格设计的列，因为我认为它们与此事无关。

Answer 1

只需删除 height 属性。像这样

#pagewidth{
position: relative;
width: 1000px;
text-align:left;
margin: 0 auto;
border-top: 1px solid #354350;
border-left: 1px solid #354350;
border-right: 1px solid #354350;
background-color:#0f0f0f;
}

然后将一个名为 clearfix 的类添加到您的 HTML 中。

<div id="pagewidth" class="clearfix">

然后将其添加到您的 CSS

  .clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

关于这个和崩溃 float 的更多信息 here