CSS 浮动高度自动调整

Question

我这里有我的 CSS 代码。我的问题是，当内容有很多东西时，它会将其高度调整为大于导航高度。我想要的是当这个浮动高度调整之一时，它也包括另一个。

<div id="main">   
    <div id="navigation"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

CSS代码如下：

#main{
    width: 960px;
    height: 500px;
    margin: auto;
}
#navigation{
    float: left;
    width: 200px;
    background-color: #C7E1BA;
}
#content{
    float: right;
    width: 740px;
    background-color: #F6E4CC;
    padding: 10px;
}
#content, #navigation {
    height: 100%;

}
#footer{
    clear: both;
    width: 960px;
    height: 100px;
    background-color: #628B61;
    margin: auto;
}

Answer 1

您可以将#navigation和都设置#content为display: table-cell，然后去掉它们上的float's。这应该够了吧。如果您想要最小高度，您可以将其设置在div's 中的任何一个上，另一个div将效仿。这应该适用于所有浏览器和 IE8+。

#navigation{
    width: 200px;
    background-color: #C7E1BA;
}
#content{
    width: 740px;
    background-color: #F6E4CC;
    padding: 10px;
}
#content, #navigation {
    display: table-cell;
}

这是一个 jsFiddle