如何使两个浮动div具有相同的高度

问题描述：

我有一个包含内部包装器的包装器，并且该内部包装器包含2个浮动div.左边的内容比右边的内容多，因此它的高度大于右边的内容.我要寻找的是两个容器的高度都相同.

I have a wrapper containing an inner wrapper, and that inner wrapper contains 2 floating divs. The left one contains more content than the right one, so it's height is greater than the one on the right. What I am looking for is that both of the containers would have the same height.

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

答

除非您可以保证每列的高度(使用这种流动性介质通常无法保证)，否则不能单独通过CSS使用浮动元素来完成此操作作为网络).但是，您确实可以选择:

You cannot do this via CSS alone using floated elements, unless you can guarantee the height of each column (which you generally can't, with such a fluid medium as the web). However, you do have options:

使用display: table-cell: http://jsfiddle.net/8LdQk/3/.不幸的是，这在IE6或7中将不起作用.此博客文章详细说明其用法可能会有所帮助.
使用JavaScript: http://jsfiddle.net/8LdQk/5/.
使用Dan Cederholm的经典人造列技巧.

Using display: table-cell: http://jsfiddle.net/8LdQk/3/. Unfortunately, this will not work in IE6 or 7. This blog post detailing its use might be helpful.
Using JavaScript: http://jsfiddle.net/8LdQk/5/.
Using Dan Cederholm's classic faux-columns trick.

如何使两个浮动div具有相同的高度

相关推荐