将所有子 div 的高度调整为 100% 父高度答案

【问题标题】：Adjusting height of all child divs to 100% parent height将所有子 div 的高度调整为 100% 父高度
【发布时间】：2013-03-25 05:29:49
【问题描述】：

我一直在努力解决这个小小的 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来解决会不会很理想？

【问题讨论】：

IE7+, FF, Chrome... jQuery 就是这样。
如果 col3 内只有 3 个 div 容器，并且 .container 父级设置了高度，那么为每个子 div 设置 33% 的高度怎么样？
已在我的回答中添加了 jquery 解决方案

标签： jquery html css

【解决方案1】：

试试这个：

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

jsFiddle example

【讨论】：

这在一定程度上是可行的，如果你看一个行覆盖 3 列的例子，高度有点多。所以在一张完整的桌子上，所有的 div 都将是相同的高度。我想，一些 if 语句可以解决这个问题。 - jsfiddle.net/wUtk9/7
但这不是你要求的吗？
对不起，很难用文字表达。每行应该是最高孩子的高度。因此，单列行 (.span3) 应该只是文本的高度。

【解决方案2】：

如果你不介意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 版本）

【讨论】：

谢谢，jQuery 版本似乎可以完美运行。有道理，谢谢你的教训。