css - 如何让2个 float div具有相同的高度

Question

我有一个包含内部包装的包装，并且该内部包装包含 2 个 float div。左边的内容比右边的多，所以它的高度比右边的大。我正在寻找的是两个容器的高度相同。

http://jsfiddle.net/Kh2Fh/

我的 html:

<div id="wrapper">
    <div id="sub-menu">
        <div id="left-column" class="column">
            Agenda</br>
            Here I put some texte                                    
        </div>
        <div id="right-column" class="column">
            sdfdsf                          
        </div>
    </div>
</div>​

我的CSS:

body{
    background-color:#E5E5E5;}

#wrapper{
    background-color:#FFFFFF;
    width:800px;
    margin-left:auto;
    margin-right:auto;
    overflow:auto;}

#sub-menu{
    margin:10px;
    width:780px;
    position:relative;
    float:left;}

.column{      
    float:left;
height:100%;}

#left-column{
    width:500px;
    background-color:yellow;}

#right-column{
    width:280px;
    background-color:magenta;}

Answer 1

您不能仅通过 CSS 使用 float 元素来做到这一点，除非您可以保证每一列的高度(通常情况下，对于像网络这样的流动媒体，您不能保证)。但是，您确实有以下选择:

1. 使用显示:表格单元格:http://jsfiddle.net/8LdQk/3/ .不幸的是，这在 IE6 或 7 中不起作用。This blog post详细说明其用途可能会有所帮助。
2. 使用 JavaScript:http://jsfiddle.net/8LdQk/5/ .
3. 使用 Dan Cederholm 的经典作品 faux-columns把戏。