div를 사용하여 동일한 높이의 열을 얻는 가장 쉬운 방법

Question

콘텐츠 열과 사이드 바가 있습니다. 내용 열에 흰색 bg가 있고 사이드 바에 약간의 그래디언트 bg 이미지가 있습니다. 콘텐츠 열은 항상 세로 막대보다 길기 때문에 세로 막대 이미지가 아래쪽으로 늘어나지 않습니다. div 및 div를 사용하여 콘텐츠 및 사이드 바 열을 항상 세로로 높이려면 어떻게해야합니까? http://www.alistapart.com/articles/fauxcolumns/이

기본적인 아이디어는 내용과 모두를 랩 사업부의 그라데이션 배경을 배치하는 것입니다 :

Answer 1

은하지 유일한 방법이지만, 그것을 할 것은, 나의 마음에 드는는 "가짜 열"트릭을 사용하는 것입니다 사이드 바. 래퍼 div는 가장 긴 DIV만큼 클 수 있으므로 그라디언트가 항상 표시됩니다.

Answer 2

position: absolute는 종종 나쁜 형태로 간주하지만, 다음 코드를 사용하여 동일한 높이의 열을 얻을 수 있습니다 :

HTML :

<div id="container"> 
    <div id="content"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat dignissim accumsan. Aenean nisl ipsum, dictum nec dignissim ac, dictum et lacus. Aenean ac sapien egestas lacus rutrum rutrum. Etiam sit amet libero ac arcu pellentesque bibendum. Nulla dignissim imperdiet nulla, ac dictum lorem feugiat id. Proin convallis tempus commodo. Ut vitae elit velit. Duis lacinia sollicitudin justo et vehicula. Duis sed velit vitae arcu tincidunt condimentum eu eget risus. Maecenas non urna nisi. 

     In ac lacinia dui. Donec lacinia, lacus fermentum ultrices iaculis, leo purus pretium velit, in rutrum est nisi sit amet mi. Curabitur nisl nunc, malesuada ac feugiat et, dignissim vel nisl. Proin ac erat in ipsum laoreet blandit nec nec tortor. Maecenas bibendum risus ac lorem pretium et dignissim lacus laoreet. Aenean suscipit porta leo ut commodo. Phasellus porttitor, nulla eget euismod pellentesque, enim sem consequat ipsum, quis interdum nunc mauris quis mauris. Proin orci est, convallis eu sodales vel, tempus a dolor. Mauris pretium faucibus tincidunt. In mauris arcu, laoreet sit amet ullamcorper sed, malesuada vel felis. Nam sollicitudin pellentesque sapien vel facilisis. Suspendisse risus dolor, tincidunt sit amet auctor nec, mollis ac nisi. Nunc sagittis libero non massa tincidunt at bibendum est pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 

     Praesent ullamcorper, odio a euismod mattis, nisi arcu feugiat nisi, eu hendrerit diam augue eget diam. Nulla pellentesque sodales ante id tincidunt. Aliquam in purus vitae ante scelerisque tempor. Duis bibendum, nibh non accumsan pulvinar, lacus libero vestibulum sem, id lacinia erat nisi scelerisque mauris. Ut et tristique metus. Aenean ullamcorper vestibulum metus a laoreet. Vestibulum iaculis vestibulum elit, lobortis pharetra orci adipiscing sit amet. Integer vel molestie nulla. Morbi fringilla erat et nisi varius blandit. Pellentesque nunc ante, tempor vitae tincidunt et, rhoncus et urna. 
    </div> 
    <div id="sidebar"> 
     sidebar 
    </div> 
</div> 

CSS :

#container 
{ 
    width: 500px; 
    position: relative; 
} 

#content 
{ 
    width: 65%; 
    background-color: #000; 
    color: #FFF; 
} 

#sidebar 
{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    background-color: #EEE; 
    width: 33%; 
} 

top: 0 결합을 bottom: 0은 (높이가 선언되지 않는 한) 요소를 한도까지 늘립니다. 데모는 jsFiddle을 참조하십시오.

Answer 3

다양한 방법으로이를 수행 할 수 있습니다. 올바른 해결책은 HTML 아키텍처에 크게 달려 있다는 것을 알았습니다.

HTML/CSS로 어려움을 겪고 있다면, 필자가 절망적으로 사용한 작업은 JS (이 예제에서는 jQuery)를 사용하는 것입니다. 이런 이유로 단순히 jQuery를 당신의 poject에 포함시킬 것을 제안하지는 않는다. 나는 이전에 사용한 대안을 제공하고 있습니다.

http://jsfiddle.net/zZpuU/

var h1=$('#div1').height(); 
var h2=$('#div2').height(); 

if (h1>h2) 
    $('#div2').height(h1); 
else 
    $('#div1').height(h2);