我有一个内容可变的可翻转卡片网格，并尝试将内容较少的卡片的height 设置为与内容最多的卡片相同的值。但无论我将height:100% 应用于哪个框/单元格，较小的单元格都会保持所需的大小。我可以看到该行本身自然具有最大height，但为什么不能所有子单元格都继承该height？
【问题讨论】：
标签： html twitter-bootstrap css twitter-bootstrap-3
为了理解height，这只会占用指定的height，这意味着如果您的容器元素的高度为300px，并且该子元素因此具有CSS height:100%，那么该子元素将采用该高度。
在您的情况下，您确实没有在任何元素上指定height，只有height:100% 和min-height:100%。很可能，您的min-height 将始终是一个固定数字，即px, em 等。
我假设你想要的是让所有盒子的高度相同。如果是这种情况，那么您可以看到我之前发布的答案 here。目标是获取所有 XX 元素（您要分组的），并确定该组的max-height。然后我们将此height 应用于组中的所有元素。
当您希望轮播、模式、工具提示或在您的情况下，列的高度始终相同时，这种情况经常发生，从而使您的布局看起来更好。
在您的情况下，您希望遍历所有 .card 元素并获取这些元素的最大高度，然后将其应用于组。我喜欢使用outerHeight() b/c 这也会得到border, padding, and margin。
var maxHeightOfCards = $('.card').map(function() {
return $(this).outerHeight();
}).get();
// or use $('.card').css('height', Math.max.apply(null, maxHeightOfCards))
$('.card').height(Math.max.apply(null, maxHeightOfCards));
【讨论】：
...虽然您的代码有很多问题，但您正在寻找的解决方案比您想象的要容易：
.row {
display:tab
}
.row > div {
display:table-cell;
float:none;
height:100%;
}
这很简单。然后您可以将height:100% 用于子元素。
【讨论】：