Question

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

在将几个不同问题的答案拼凑在一起之后，我终于通过使用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的可堆叠网格效果，并且以最少的hackish方式。如果可能的话，我想用纯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的类移到列元素上，然后从那里开始工作以恢复间距，或者你可以采用不同的方法。

我希望有所帮助！

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

1 个答案: