내부 div를 만드는 CSS가 외부 div 높이와 일치합니다

Question

기본적으로 2 개의 열이있는 양식 (스크린 샷 : http://mason.gmu.edu/~vnguyenl/form.jpg)을 만들고 있습니다. 레이블 열과 입력 열입니다. 라벨면은 자체 bg 색상을 가진 div에 있고 입력 필드면과 동일합니다. 한면에 많은 텍스트가있는 경우 다른 열보다 높이가 일치하도록 텍스트를 만들려고합니다. 지금은 한쪽이 다른 쪽보다 크면 틈이 있습니다. 어떤 도움을 주셔서 감사합니다! 감사.

양식의 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">)에 배경색을 넣은 다음 래핑 요소 그의 코멘트 (http://quirksmode.org/css/clearing.html)에 언급 된 @MarcB처럼 지우기를 사용하여 전체 높이로 밀려났다.

그래서 다음과 같은 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 아래 참조 :이 솔루션의 IE 6에서 작동하지 않습니다 그러나 것을
http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/

주 7