的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