如何将所有列设置为相同的高度？ [复制]答案

【问题标题】：How can I set all columns to be the same height? [duplicate]如何将所有列设置为相同的高度？ [复制]
【发布时间】：2013-02-20 07:04:10
【问题描述】：

我有一些列 (divs) 我希望始终保持相同的高度。

我使用的是 Zurb Foundation，所以布局是这样的，我不能将 divs 放在其他人中以拉伸它们。

<div class="row equalheight">
    <div class="three columns"> ... </div>
    <div class="three columns"> ... </div>
    <div class="three columns"> ... </div>
    <div class="three columns"> ... </div>
</div>

使用 CSS 可能并不容易，但我怎样才能让所有列自动地等高？

设法使用 jquery 解决此问题，解决方案如下。

【问题讨论】：

这不会破坏基金会的响应性吗？
好点，我需要一种方法在大小超过断点时禁用它。
对于它的价值 - 我不知道我是否看到 jQuery 答案发布为可接受的答案。如果用户禁用了 JS 怎么办？看起来纯 CSS 方法是“正确”的答案，而 jQuery 是最简单的方法。

标签： jquery html css

【解决方案1】：

经过eureka! 时刻后，我自己想出了答案，并认为我会为了社区的利益而分享。

我使用jquery 循环遍历元素的每个children，将最大尺寸保存在变量中，然后将该尺寸设置为所有子元素。

我将函数绑定到窗口load 和resize 事件。

<script>
function equalheight() {    
    $('.equalheight').each(function(index) {
        var maxHeight = 0;
        $(this).children().each(function(index) {
            if($(this).height() > maxHeight) 
                maxHeight = $(this).height();
        });
        $(this).children().height(maxHeight);
    });    
}

$(window).bind("load", equalheight);
$(window).bind("resize", equalheight);
</script>

完美运行！

【讨论】：

【解决方案2】：

查看以下网站：

http://css-tricks.com/fluid-width-equal-height-columns/

【讨论】：

我看到了这个链接，用基础太繁琐了，要么用背景假装柱子，要么改变结构太多。
嗯，好的。我通常发现 css-tricks 是一个很好的网站，可以提供有用的东西。我快要睡着了，所以希望其他人会想出一个更短的答案！祝你好运！
@AdamKDean 这就是为什么将您已经看到/尝试过的内容作为问题的一部分显示是一个非常好的主意：因此您不会得到包含您已经看过/尝试过的内容的答案。
道歉@cimmanon，当我有一个想法时，我正要提交我的问题，并设法让它发挥作用。与其放弃这个问题，我想我会发布它并同时回答它，以防它将来可以帮助其他人。因此，为什么我没有提及我已经尝试过的内容。
@AdamKDean 考虑到等高列出现在 SO 上的频率，您本可以帮大家一个大忙，然后放弃您的问题。查看所有相关问题----->

【解决方案3】：

在不修改标记的情况下，这是创建等高列的最简单方法：

http://jsfiddle.net/Nu5KN/

div.equalheight {
    display: table;
    width: 100%; /* optional */
}

div.equalheight .columns {
    display: table-cell;
}

【讨论】：

虽然这通常有效，但在基础上似乎并没有达到预期的效果。
注意：display:table-cell; 不适用于