유체 높이 구역을 만드는 방법?

Question

참고 : 여전히 CSS & HTML을 배우고 있으므로이 질문이 "noobish"인 것처럼 보이는 경우입니다. 당신이 예제를 제공 할 수 있다면, 또는 제 질문에 맞춘 기사가 좋을 것입니다.

div ("background")를 만들었습니다.이 div에는 두 개의 div가 있습니다 ("&"right).

"왼쪽"& "오른쪽"div의 콘텐츠 양을 기준으로 "배경"div의 높이를 늘리거나 축소하고 싶습니다.

#background { 
width:100%; 
height:15em; 
background-color:#FFF; 
box-shadow: 0 0 5px #888; 
-moz-box-shadow: 0 0 5px #888; 
-webkit-box-shadow: 0 0 5px#888; 
clear:both; 
} 

확장 또는 축소하는 방법을 모르므로 저는 현재 "background"div의 높이를 15em로 설정했습니다. 나는 그것을 "100 %"와 "자동"으로 설정하려고했지만, 단지 "배경"div가 사라지게 만듭니다.

가 여기 내 전체 HTML & CSS 코드입니다 : 그것은 내용의에 당신이 height 값없이 컨테이너 div두면 http://jsfiddle.net/jueRh/

Answer 1

, 그것은 확장 컨테이너가 될 것이다.

여전히 div에 특정 높이가 있지만 넘치는 내용으로 확장하려면 min-height을 사용할 수 있습니다. 또한 min-height는 동일 또는 enlisted browsers in this link.

EDIT 이상 지원됩니다 않습니다을하지만, 당신은 컨테이너 내부 float 에드에게 div의를 사용하게 될 경우, 당신은 clear에 적절한 렌더링을위한 부동 소수점이있을 것이다. 당신은 또한 당신이 clear ING를 건너 뛸 수있는 float 대안에 대한 display:inline-block를 사용하지만, #background에서 that is also support limited.

Answer 2

설정 overflow: hidden;과 height:15em; 선언을 제거 할 수 있습니다.

데모 : http://jsfiddle.net/sonic1980/jueRh/1/