html - 可变高度列，背景颜色

Question

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

可以在这里看到一个 fiddle : 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。

在此处尝试示例 Fiddle:http://jsfiddle.net/jg9bd/

您还可以在这里获得其他方法:http://css-tricks.com/fluid-width-equal-height-columns/