如何让2个浮动div具有相同的高度

Question

我有一个包含内部包装器的包装器，该内包装器包含2个浮动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来使用浮动元素。但是，您有选项：

1. 使用display: table-cell：http://jsfiddle.net/8LdQk/3/。不幸的是，这在IE6或7中不起作用。This blog post详细说明其使用可能会有所帮助。
2. 使用JavaScript：http://jsfiddle.net/8LdQk/5/。
3. 使用Dan Cederholm的经典faux-columns技巧。

Answer 2

使用1像素高重复背景图像，500 px宽黄色和280 px宽品红色。当一列的大小增加时 - 您会得到两列的高度相同的错觉。

<div class="backgroundColumn">
<div>
Left column
</div>
<div>
right column
</div>
<div class="clear">
</div>
</div>

Answer 3

这似乎对我有用。可以这么简单吗？ ：）

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