동적으로 DIV 높이와 일치하는 방법

Question

레이아웃에 두 개의 열이 있습니다. 메인 컨텐츠 및 사이드 바. 기본 요구 사항이 증가하는 경우 사이드 바는 자동으로 높이를 조정해야합니다. 그리고 저는 이것을 성취하기를 원합니다. 내가 너무 IE6에 대한 수정 사항을 얻는 경우 http://jsfiddle.net/SZ7y9/4/

그것은 좋은 것 : 여기

는 샘플 코드입니다.

Answer 1

가짜 열이 좋은 그러나 당신이 순수 CSS 버전하려는 경우 - http://jsfiddle.net/spacebeers/s8uLG/3/

을 당신은 숨겨진 설정 오버플로 용기를 설정 한 다음에 각이 추가 DIV 음수 여백 - 바닥 및 균등 양수 여백 - 바닥.

#container { overflow: hidden; } 
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; } 
#container .col2 { background: #eee; } 

<div id="container"> 
    <div> 
     <p>Content 1</p> 
    </div> 
    <div class="col2"> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
    </div> 
</div> 

편집 : 그 다음 예를 살펴 가지고 라운드는 테두리를 원하는 경우-http://www.ejeliot.com/samples/equal-height-columns/example-6.html

Answer 2

내가 가짜 열이 작동 것이라고 생각 : http://www.alistapart.com/articles/fauxcolumns/

Answer 3

을 내가 본이 만 시간을 필요로했다. 일반적으로 내가 무엇을 할 것입니다 것은 이것이다 :

Fiddle

은 기본적으로 사이드 바 배경 색상, 거기에 내부 용기를 넣고 투명 사이드 바 설정합니다. 그런 다음 배경을 시궁창에 표시하려면 주 콘텐츠 영역에 경계선을 추가하여 인공 거터를 얻을 수 있도록하십시오.

경고 : 메인 콘텐츠 영역이 사이드 바보다 길거나 "여백"이 주요 콘텐츠 영역만큼 아래로 표시되어야합니다. 일반적으로 주 콘텐츠 영역의 최소 높이를 설정하여이를 "수정"합니다.