Question

我有一个可翻转卡片网格，内容可变，并尝试将内容较少的卡片height设置为与具有最大内容的卡片相同的值。但无论我应用height:100%哪个盒子/单元格，较小的单元格都保持所需的大小。我可以看到行本身自然具有最大高度，但为什么所有子单元格都不能继承 height ？

以下是示例：http://www.bootply.com/NnHFEKwrwu

Answer 1

要了解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));

Answer 2

...虽然您的代码中存在许多错误，但您正在寻找的解决方案比您想象的更容易：

.row {
  display:tab
}
.row > div {
  display:table-cell;
  float:none;
  height:100%;
}

它很简单。然后，您可以将height:100%用于子元素。

如何将连续的所有Bootstrap 3单元格设置为相同的高度

2 个答案: