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

Question

我有一个包含内部包装器的包装器，而该内部包装器包含2个浮动div。左侧的div包含比右侧更多的内容，因此它的高度大于右侧的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;}

- Marc

---

请将代码放在问题中，并且不要使用此平台进行个人求助。Stack Overflow的问题应当对其他人有所帮助，而当链接失效时，问题也将变得毫无意义。 - Lightness Races in Orbit

如果你搜索这个问题的常见名称，你会在网络上找到一些好的答案。 - Matt Gibson

Answer 1

您无法仅使用浮动元素通过CSS完成此操作，除非您可以保证每个列的高度（在Web这样流动的媒介中通常无法保证）。但是，您有以下选项：

1. 使用display: table-cell：http://jsfiddle.net/8LdQk/3/。不幸的是，在IE6或7中无法使用。这篇博客文章详细介绍了它的用法，可能会有所帮助。
2. 使用JavaScript：http://jsfiddle.net/8LdQk/5/。
3. 使用Dan Cederholm经典的虚拟列技巧。

- Chuck Harmston

---

你好 Chuck。由于我尝试做的事情似乎相当困难，我会按照你的想法进行，但为了让它在所有浏览器中都能正常工作，我将只制作一个简单和普通的表格，而不是两个浮动的div... - Marc

Answer 2

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

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

- FiveTools

---

这是丹·塞德霍姆的经典伪列技巧 http://www.alistapart.com/articles/fauxcolumns/，正如另一位用户在此处发布的。 - FiveTools

Answer 3

这对我来说似乎是个好办法。难道真的这么简单？:)

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

- Ian Robinson

---

你好Ian，感谢你的帮助。我正在寻找一些灵活性。高度应该自动调整。但是当在.column上设置高度为auto时，它不起作用... - Marc

这不是一个灵活的解决方案。 - Mindbreaker