html - 使用 Bootstrap 3 等高列，同时保留列填充

Question

我有一个常规的 Bootstrap 3 CSS 设置。我想对行内的列应用相同的高度，并且一直在考虑使用 display:table 和 display:table-cell。此方法有效，但它自然似乎会在内容较少的列上应用垂直填充。

以此 HTML 为例:

<div class="row">
    <div class="col-xs-4">
        <div class="block">
            Content for block<br />
            Some more content<br />
            And a bit more<br />
            Last bit
        </div>
    </div>
    <div class="col-xs-8">
        <div class="block">
            Content for block<br />
            Only some more content
        </div>
    </div>
</div>

然后这个CSS:

.row { 
  display: table;
  width: 100%; }

.row > div {
  float: none;
  display: table-cell;
  vertical-align: top; }

.block { 
  height: 100%;
  background: red; }

现在，列确实具有相同的高度，但具有红色背景的 .block 并没有反射(reflect)这一点，因为第二列应用了底部填充，我无法删除。

请参阅此 fiddle 示例:http://jsfiddle.net/cyan8fjz/

有没有办法让我的.block使用完整的height:100%？理想情况下，我不想绝对定位 .block，因为列上的左右填充(可能会在不同的屏幕分辨率下发生变化)。

注意，我在上面的示例中没有包含 Bootstrap CSS，但我已经在 fiddle 中包含了。假设它是相关的并包含在所有示例中。

Answer 1

你可以这样使用 ' padding-bottom: 1000em; margin-bottom: -1000em; 技巧。

这是一个示例: Link