我有一个常规的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不会反映这一点，因为第二列应用了底部填充，我无法删除。
请参阅此小提琴以获取示例：http://jsfiddle.net/cyan8fjz/
是否有解决办法让.block使用完整的height:100%？理想情况下，我不希望绝对定位.block，因为列上的左右填充（可能会在不同的屏幕分辨率下发生变化）。
注意我上面的示例中没有包含Bootstrap CSS，但我有小提琴。假设它是相关的并包含在所有示例中。