可变高度列，背景颜色答案

【问题标题】：Variable height columns, background color可变高度列，背景颜色
【发布时间】：2014-02-20 17:32:35
【问题描述】：

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

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

我尝试了两种方法：

让第一列具有灰色背景，并将其扩展到 100% 高度（不起作用）。
将 .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，但是当该值没有内容时，该字段显示为大部分灰色（因为它的高度小于键）。

这是我正在尝试做的图片：

有人遇到过这个问题吗？你做了什么来解决这个问题？更改数据并不是一个真正的选择。

【问题讨论】：

您不能将min-height:1em; 之类的内容应用于您的值字段吗？否则，除了使用 flexbox 之外，您可能不得不在行上平铺背景图像。
最小高度起作用了，有点...我想我在这里没有的另一个测试用例（我不担心）是键是否跨越多个线。基本上，最小高度必须根据键的实际高度进行更改。
感谢您的图片。帮助我们知道您到底需要什么。请看下面的解决方案。

标签： html css twitter-bootstrap

【解决方案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/

【讨论】：