Html 具有引导3的等高列，同时保留列填充

我有一个常规的bootstrap3css设置。我想对行内的列应用相同的高度，并一直在研究使用

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>

现在，列的高度确实相同，但红色背景的

.block

没有反映这一点，因为第二列应用了底部填充，我无法删除

请参阅此小提琴以了解示例：

有没有办法让我的

.block

使用完整的

高度：100%

？理想情况下，我不想绝对定位

.block

，因为列上有左右填充（在不同的屏幕分辨率下可能会改变）

---

注意，我没有在上面的示例中包括引导CSS，但我在小提琴中有。假设它是相关的，并且包含在所有示例中。

您可以像这样使用“

填充底部：1000em；边缘底部：-1000em技巧

这里有一个例子：
超级！允许我对
.block
应用进一步的样式，例如填充，而不破坏任何内容。谢谢
.row { 
  display: table;
  width: 100%; }

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

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