유체 컬럼 및 고정 버퍼 컬럼 - css를 사용하여 유체 컬럼과 동일한 높이로 만드는 방법?

Question

나는이 빈 div들이 유체 div와 같은 높이를 가지기를 원한다.

http://jsfiddle.net/QLdZs/

HTML :

<div id="container"> 
    <div class="buffer"></div> 
    <div class="buffer"></div> 
    <div class="buffer"></div> 
    <div id="content"> 
     this is content<br/> 
     lalala<br/> 
     lala<br/> 
     lala<br/> 
     lalalalala lala la<br/> 
     o sole mio<br/> 
    </div> 
</div> 

CSS :

#container { 
overflow:hidden; 
} 
.buffer { 
    float:left; 
    background-color:red; 
    width:100px; 
    min-height:10px; 
    border-right:1px solid white; 
} 
#content { 
    overflow:hidden; 
    background-color:green; 
} 

내가 #container {position:relative;}을 할 수있어, 다음 .buffer {position:absolute;height:100%;}을 설정하지만이 모든 버퍼의 위치를 ​​설정해야합니다 개별적으로 여백을 #content div로 설정합니다. 때로는 2 개, 3 개 버퍼가 있고 때로는 버퍼가 없을 수도 있습니다. 따라서 이것이 최선의 방법은 아닙니다.

어떻게해야할까요?

Answer 1

확인이 문서 아웃, 나는 당신이 필요하다고 생각 : http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

I 대개 사용되는 고정 높이,하지만.

기사에서 인용 :

<div id="container3"> 
    <div id="container2"> 
     <div id="container1"> 
      <div id="col1">Column 1</div> 
      <div id="col2">Column 2</div> 
      <div id="col3">Column 3</div> 
     </div> 
    </div> 
</div> 

그리고 CSS는

#container3 { 
    float:left; 
    width:100%; 
    background:green; 
    overflow:hidden; 
    position:relative; 
} 
#container2 { 
    float:left; 
    width:100%; 
    background:yellow; 
    position:relative; 
    right:30%; 
} 
#container1 { 
    float:left; 
    width:100%; 
    background:red; 
    position:relative; 
    right:40%; 
} 
#col1 { 
    float:left; 
    width:26%; 
    position:relative; 
    left:72%; 
    overflow:hidden; 
} 
#col2 { 
    float:left; 
    width:36%; 
    position:relative; 
    left:76%; 
    overflow:hidden; 
} 
#col3 { 
    float:left; 
    width:26%; 
    position:relative; 
    left:80%; 
    overflow:hidden; 
}