html - html css 2列布局，两列自动高度相同？

Question

我设置了两列布局，我想让两列自动拉伸以填充两列的父 div，原因是左列有背景和边框，我希望它占据页面的整个侧面，因此它看起来不会凌乱等。我使用 inline-block 对齐两列，而不是浮动或任何东西（我不能使用溢出：隐藏，因为它弄乱了我的一些可能超出 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

以前的答案中更长的解释：这里和那里还有很好的旧方法仿列（你的设计必须考虑到这种技术）

Answer 2

试试这个：http: //jsfiddle.net/scrimothy/Y2ZsJ/

只需将其添加到您的 CSS 中：

.container { overflow: hidden; }
.container div { 
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

（来自：http ://css-tricks.com/fluid-width-equal-height-columns/在标题下：一种真正的布局方法）