可變高度列，背景顏色

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

考慮了第三次測試情況下鍵列可能是多行上的解決方案：

添加以下屬性.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/