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完全相同

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

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/标题下：One True Layout Method

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

2 个答案: