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

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

http://jsfiddle.net/Kh2Fh/ http://jsfiddle.net/Kh2Fh/

My 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>​

My 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;}

您不能仅通过 CSS 使用浮动元素来做到这一点，除非您可以保证每列的高度（对于网络这样的流体介质，您通常不能保证）。但是，您确实有选择：

1. Using display: table-cell: http://jsfiddle.net/8LdQk/3/ http://jsfiddle.net/8LdQk/3/。不幸的是，这在 IE6 或 7 中不起作用。这篇博文 http://www.onenaught.com/posts/201/use-css-displaytable-for-layout详细说明其用途可能会有所帮助。
2. 使用 JavaScript：http://jsfiddle.net/8LdQk/5/ http://jsfiddle.net/8LdQk/5/.
3. 使用 Dan Cederholm 的经典作品假列 http://www.alistapart.com/articles/fauxcolumns/ trick.