如何匹配浮动兄弟div的高度

Question

我有以下情况:http://jsfiddle.net/F3SqM/2/

我有两列,我只知道columnB的高度.两列都是浮动的,我希望columnA匹配columnB的高度(因此是全高).

我已经尝试在columnA上设置相对于其父级的高度:100%,但这仅在父级具有指定高度时才有效,如非高度:100%.不幸的是,父级的高度取决于columnB,而B列的高度不能是静态的.

我环顾四周,尝试了我发现的潜在解决方案,但这些方法都没有,因为我在网上发现的大多数情况都是处理具有指定高度的容器.有任何想法吗？

Answer 1

我个人喜欢www.ejeliot.com的等高柱

http://jsfiddle.net/spacebeers/s8uLG/3/

你设置你的容器溢出设置为隐藏,然后在每个div添加负边距底部和相等的正填充底部.

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
</div>

Faux Columns也很好,可能更容易设置,但如果你真的死了使用图像,这是一个非常好的方法.