Bootstrap 列中子 div 的高度相等 - Chrome 和 Safari

Question

FIDDLE

基本上，目标是具有动态生成的内容的并排列，并且列内的 div 与具有最长内容的 div 具有相同的高度。重要的是不仅 Bootstrap 列的高度相同，而且它们的 子 div 也具有相同的高度。

在将几个不同问题的答案拼凑在一起后，我终于设法通过使用 table-cell 的组合并将所有内容的高度设置为 100% 来实现这一点：

@media (min-width: 768px) {

    .row {
        display: table-row;
        min-height: 100%;
        height: 100%;
    }

    [class*="col-"]{
        float: none;
        display: table-cell;
        background-color: red;  /* Color set just to confirm column heights */
        min-height: 100%;
        height: 100%;
        padding-bottom: 30px;
    }
}

.papers {
    color: #181818;
    border: #ccc solid 1px;
    background-color: #fffaec;
    box-shadow: 
        4px 4px 0 #fffaec,
        5px 5px 0 #ccc,
        9px 9px 0 #fffaec,
        10px 10px 0 #ccc,
        14px 14px 0 #fffaec;
    padding: 0px 30px;    
    text-align: left;
    min-height: 100%;
    height: 100%;
}

.papers:hover {
    background-color: #e9e5d9;
    box-shadow:
        4px 4px 0 #e9e5d9,
        5px 5px 0 #ccc,
        9px 9px 0 #e9e5d9,
        10px 10px 0 #ccc,
        14px 14px 0 #e9e5d9; 
}

或者，所以我想：它适用于 Firefox（我的开发环境），但不适用于 Chrome 或 Safari。为什么？

我需要它在保留 Bootstrap 的可堆叠网格效果的同时工作，并且以尽可能少的黑客方式。如果可能的话，我想用纯 CSS 来做这件事。

我已阅读有关此主题的其他问题，但其中大多数已过时，或者似乎仅适用于控制列本身的高度。

编辑：@Blake 通过直接设置列样式的解决方案：http://jsfiddle.net/7q4xjs25/11/

Answer 1

显示为table-row 的元素期望它的父元素表现为table。事实上，将父元素设置为display: table; 将为其子元素启用此上下文。您实际上并不需要 table-row 元素，因此您只需将声明更改为：

.row {
    display: table;
    min-height: 100%;
    height: 100%;
}

这应该会导致元素的行为符合您的预期！

作为解决您对高度的评论的更新，您实际上可以删除所有 height: 100% 和 min-height: 100% 规则。如果它们不存在，table-cell 元素将全部共享最高内容的高度.

但是，您的其他一些样式似乎确实依赖于这些规则，因此您可能需要进行一些调整。虽然列元素现在将按内容调整大小，但其中的 .papers 元素将不会（因为它们的父元素不再具有可以填充的设定高度）.. 并且由于这些元素是视觉样式的元素看起来您已经失去了之前display: table 更改的好处。为了解决这个问题，您需要确保具有视觉样式的元素是带有display: table-cell 的元素。这可能意味着将 papers 的类向上移动到列元素上，然后从那里开始工作以恢复您的间距，或者您仍然可以以不同的方式处理它。

希望对你有帮助！