可变高度列，背景颜色

Question

我正在尝试使用Bootstrap创建一个两列的行。第一列应具有灰色背景色。我似乎无法将col-xs- *扩展到行的高度的100％。

这里可以看到一个小提琴： http://jsfiddle.net/Kikketer/6AM4J/

我有两种方法可以做到这一点：

1. 让第一列具有灰色背景，并将其延伸至100％高度（不起作用）。
2. 使.row类具有灰色，并使第二列用白色背景覆盖它。

-HTML：

<div class="ex_wrapper">
    <div class="ex_1_row row">
        <div class="ex_1_key col-xs-6">Some Content</div>
        <div class="ex_1_val col-xs-6">Lots of content that causes a wrap</div>
    </div>
        <div class="ex_1_row row">
        <div class="ex_1_key col-xs-6">Another Header</div>
        <div class="ex_1_val col-xs-6"></div>
    </div>
</div>

-CSS：

/** Example 1 would just have the key highlight in grey **/
.ex_1_key {
    background-color: lightgrey;
    height: 100%;    /** notice the 100% doesn't seem to work **/
}

/** Example 2 colors the whole row, and covers things in white **/
.ex_2_row {
    background-color: lightgrey;
}

.ex_2_val {
    background-color: white;
}

这两种方法都失败了。我目前正在使用选项＃2，但是当该值没有内容时，该字段显示为灰色（因为它的高度小于键）。

这是我正在尝试做的事情的图像：



有人有这个问题吗？你是怎么解决这个问题的？更改数据实际上不是一种选择。

Answer 1

考虑第三个测试用例的解决方案，其中Key列也可能是多行的：

将以下属性添加到.ex_2_val

padding-bottom:5000px;
margin-bottom:-5000px;

并将overflow:hidden;添加到.ex_2_row。

在此尝试示例小提琴：http://jsfiddle.net/jg9bd/

此外，您还可以在此处获取其他方法：http://css-tricks.com/fluid-width-equal-height-columns/