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

【问题标题】：html css 2 column layout, both columns same height automatically?html css 2列布局，两列自动高度相同？
【发布时间】：2012-09-01 13:53:02
【问题描述】：

我设置了两列布局，我想让两列自动拉伸以填充两列的父 div，原因是左列有背景和边框，我希望它占据页面的整个一侧，这样它就不会看起来很乱。我使用 inline-block 对齐两列，而不是浮动或任何东西（我不能使用溢出：隐藏，因为它弄乱了我的一些可能超出 div 的功能，例如：下拉菜单）所以我需要找到一个简单的方法来做到这一点，使用这个方法。

jsfiddle:

http://jsfiddle.net/sFBGX/

【问题讨论】：

标签： html css layout

【解决方案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 完全相同

先前答案中的较长解释：here 和 there 以及 faux-columns 的旧方法（您的设计必须考虑这种技术）

【讨论】：

谢谢，这似乎是一个很好的方法，我刚刚完成了对我的布局的调整，效果很好。我只有几个问题（就利润而言），因为它基本上是一张桌子。所以谢谢。
不客气。是的，边距需要一些额外的工作：您可以将它们替换为 padding 或 border-spacing 或每个“单元格”内的其他元素（您也可以在表格或表格容器上使用边距）

【解决方案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/ 标题下：一种真正的布局方法）

【讨论】：

OP表示不能使用overflow: hidden
仍然是一种有用的技术（和链接）。我很少使用overflow: hidden;（因为它在项目中的未来影响）所以我在 jsfiddle 中玩了最后 10 分钟 :)