的div的高度 - 應該是平等的，靈活的

Question

我想有三列：

• 左側立柱（紅色背景）
• 中心柱（黃色背景）
• 權列（黑色背景）

HTML，像這樣：

<div id="container"> 
    <div id="left_column"> 
     <p>text</p> 
    </div> 

    <div id="center_column"> 
     <p>loooooong text</p> 
     <p>other text</p> 
    </div> 

    <div id="right_column"> 
    </div> 
</div>​ 

每列都應具有相同的高度（柔性）

我做了演示http://jsfiddle.net/4hj4f/8/ - 但這CSS是錯誤的 - 列有不同的高度

Answer 1

您可以使用顯示：表對於這種類型的功能。像這樣寫：

body, html{height:100%} 
#container { 
    height: 100%; 
    display:table;  
} 

#left_column, #center_column, #right_column { 
    display: table-cell; 
    width: 200px; 
    height: 100%; 
    vertical-align:top; 
} 

入住這http://jsfiddle.net/4hj4f/9/

Answer 2

設置容器高度。它足以設定你的狀況。

#container { 
height: 500px;    
} 

演示：fiddle