jquery - 将所有子 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 版本)