如何匹配浮动兄弟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也很好，可能更容易设置，但如果你真的死于使用图像，这是一个非常好的方法。

Answer 2

最快的修复方法是使用display：table-cell而不是浮动：

http://jsfiddle.net/F3SqM/1/

但是，这只适用于IE8 + ...

Answer 3

您可以将列B放在A列中，这样可以使A列换行，从而获得相同的高度。

Answer 4

您可以像this示例

中那样为父元素提供所需的高度

Answer 5

您可以使用javascript更改任何其他对象的高度，但不能单独使用CSS。

你说B的高度是动态的，但是没有你的代码就有点难以理解为什么它可以是动态的以及我如何为你编写js代码。