如何匹配浮动兄弟divs的高度 [英] How to match height of floating sibling divs

问题描述

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

我有两列，我只知道columnB的高度。两列都是浮动的，我希望columnA匹配columnB的高度（因此是全高）。

我试过在columnA上设置高度：相对于父级的高度为100％，但这只适用于父级具有指定高度，因为不在高度：100％ 。不幸的是，父级的高度依赖于columnB，而B级的高度不能是静态的。

我环顾四周，尝试了我找到的潜在解决方案，但没有一个能够工作，因为我在网上发现的大多数场景都处理了具有指定的容器高度。任何想法？

解决方案

我个人喜欢www.ejeliot.com的同等高度栏目。

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

您将容器设置为溢出设置为隐藏状态，然后在每个div上添加负边距底部和相等的正底部填充。

  #container {overflow：hidden; } 
 #container div {float：left;背景：#ccc;宽度：200px; margin-bottom：-2000px; padding-bottom：2000px; } 
 #container .col2 {background：#eee; } 
 
< div id =container> 
< div> 
< p>内容1< / p> 
< / div> 
< div class =col2> 
< p>内容2< / p> 
< p>内容2< / p> 
< p>内容2< / p> 
< p>内容2< / p> 
< / div> 
< / div> 
  

虚拟列也很好，可能更容易设置，但如果您真的死于使用这是一个很好的方法。

I have the following situation: http://jsfiddle.net/F3SqM/2/

I have two columns, I only know of the height of columnB. Both columns are floating, and I want columnA to match columnB's height (hence be full height).

I've tried setting height:100% on columnA relative to its parent, but this only works if the parent has a specified height, as in not height:100%. Unfortunately, the height of the parent is dependent on columnB and column B's height cannot be static.

I've looked around and tried the potential solutions i've found but none of these work, as most scenarios i've found online deal with a container having a specified height. Any ideas?

解决方案

Personally I like the equal height columns from www.ejeliot.com

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

You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.

#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 is also good and probably easier to set up but if you're really dead against using an image this is a pretty good method.

这篇关于如何匹配浮动兄弟divs的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！