CSS製作內部div匹配外部div高度

Question

我基本上是一個窗體（屏幕截圖：http://mason.gmu.edu/~vnguyenl/form.jpg），其中有2列。標籤欄和輸入欄。標籤邊是一個div，它有自己的bg顏色，和輸入欄一樣。我試圖做到這一點，如果一方的文字多於另一方的文字則會匹配它的高度。現在，如果一方比另一方大，則存在差距。將不勝感激任何幫助！謝謝。

該窗體的HTML如下所示：

<div class="formRow"> 
<div class="labelColumn">Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: <span class="required">*</span></div> 
<div class="contentcolumn"> 
    <input class="textBox300" type="text" id="last_name" tabindex="1" /> 
</div> 
</div> 

的CSS如下：

#pt-profile-form .labelColumn, .labelColumn2 { 
font-weight:bold; 
float:left; 
width:300px; /* Width of left column */ 
margin-left:0px; 
background:#f0f4f7; 
text-align:left; 
padding:5px; 
padding-left:14px; 
display:block; 
white-space:normal; 
position:relative; 
clear:both; 
} 

#pt-profile-form .formRow { clear:both; height:100%; } 

#pt-profile-form .contentcolumn, .contentcolumn2 { 
margin-left:320px; /* Set left margin to LeftColumnWidth */ 
background-color:#eae9d7; 
padding:5px; 
text-align:left; 
vertical-align:middle; 
position:relative; 
} 

#pt-profile-form .labelColumn, .contentcolumn { 
/*height:30px;*/ 
min-height:30px; 
height:100%; 
} 

#pt-profile-form .labelColumn2, .contentcolumn2 { /* column properties for <textarea>  */ 
/*height:100px;*/ 
height:100%; 
} 

Answer 1

簡單的解決方案

至於我能看到的唯一實現這一點的方法是將背景顏色放在包裝元素上（在你的案例中爲<div class="formRow">），然後確保包裝元素用@MarcB在他的評論（http://quirksmode.org/css/clearing.html）中提到的方法，通過使用清算被推到了全高。

所以下面的CSS應該修復它：

.formRow { 
    overflow: auto; 
    background-color: #EAE9D7; 
} 

演示：
http://jsfiddle.net/nottrobin/qnRgL/

一個需要注意該解決方案是，它會隱藏溢出的內容。如果您需要顯示滿溢的內容，請嘗試替代解決方案。

---

替代清溶液

如果改變overflow屬性將導致因任何原因的問題，另一種解決方案是使用:after僞元素添加生成的內容。例如：

.formRow:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
    background-color: #EAE9D7; 
} 

見Generating Content Through CSS下：
http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/

不過請注意，此解決方案將無法在IE中工作6和7