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/