css - 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

您可以将display:table用于此类功能。像这样写：

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;            
}

演示：小提琴