html css 2列布局,两列的自动高度相同？

Question

我有一个两列布局设置,我希望两列自动拉伸以填充两列的父div,原因是左列有背景和边框,我希望它占用页面的整个侧面所以它看起来不会那么混乱.我使用内联块来对齐两列,而不是浮动或任何东西(我不能使用溢出:隐藏因为它弄乱了我的一些功能可能会超出div,例如:下拉菜单)所以我需要找到使用此方法执行此操作的简单方法.

的jsfiddle:

http://jsfiddle.net/sFBGX/

Answer 1

您可以使用CSS表格布局(而不是HTML表格布局,这将是糟糕的语义):

.container {
    display: table;
    table-layout: fixed;
    width: 944px;
    font-size: 0.75em;

}
.col {
    display: table-cell;
    vertical-align: top;
}

.container .left
{
    width: 236px;
    background-color:grey;
}
.container .right
{
    width: 708px;
    background-color:yellow;
}

<div class="container">
    <div class="col left">Left</div>
    <div class="col right">Right
    </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>Hey
      
    </div>
</div>

兼容性是IE8 +和IE6/7的后备,如果需要与完全相同 inline-block

在以前的答案中有更长的解释:这里和那里还有古老的人造柱方法(你的设计必须考虑到这种技术)