将所有子div的高度调整为100％父级高度

Question

我一直在为这个小小的CSS问题而苦苦挣扎。我希望'col3'的所有子div都是相同的高度。因此，每个边界将从顶部延伸到底部。

我发现这个类似的问题，但是这似乎并没有解决多列，并且链接被打破:( - How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

<div class="container"> 
<div class="col3"> 
       <div> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet imperdiet mi, nec rhoncus enim convallis id. Nunc laoreet velit a tortor euismod porta. 
        </p> 
       </div> 
       <div> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet imperdiet mi, nec rhoncus enim convallis id. Nunc laoreet velit a tortor euismod porta. Duis interdum suscipit dui et pulvinar. Curabitur turpis nisi, congue vel aliquet et, iaculis in leo. Maecenas pellentesque felis eget lectus viverra feugiat. In hac habitasse platea dictumst. Integer eget accumsan risus. Fusce ac lectus odio, non placerat tortor. 
        </p> 
       </div> 
       <div> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet imperdiet mi, nec rhoncus enim convallis id. Nunc laoreet velit a tortor euismod porta. Duis interdum suscipit dui et pulvinar. Curabitur turpis nisi, congue vel aliquet et, iaculis in leo. Maecenas pellentesque felis eget lectus viverra feugiat. In hac habitasse platea dictumst. Integer eget accumsan risus. Fusce ac lectus odio, non placerat tortor. 
        </p> 
       </div> 
      </div> 

这里是一个的jsfiddle：http://jsfiddle.net/wUtk9/1/ - 我提供了两个示例，一个是典型的三列布局，另一个是跨两列的列，就像表格的“colspan”一样。

这是理想的使用jQuery来解决吗？

Answer 1

如果你不打扰约IE7，可以使用以下样式：

div.col3 { 
    display:table; 
} 

.col3 > div { 
    display:table-cell; 
} 

http://jsfiddle.net/wUtk9/8/

更新

http://jsfiddle.net/wUtk9/10/（多列布局）

http://jsfiddle.net/wUtk9/11/（jQuery的版本）

Answer 2

试试这个：

var maxHeight=0; 
$('div.col3 div').each(function(){ 
    if($(this).height() > maxHeight) maxHeight = $(this).height(); 
}); 
$('div.col3 div').height(maxHeight); 

jsFiddle example