可能的重复：
一个较大的 div 中的 2 个 div 必须等于相同的高度……但是如何呢？

我无法自动将containerLeft div（红色背景）的高度设置为与containerRight div 相同的高度。我特别希望它保持流体网格。

jsfiddle在这里：http://jsfiddle.net/s7ufg/

如果您知道两列中的一列总是比另一列高，那么您可以执行以下操作：

demo

只要给position: absolute到较短的柱并使其从top: 0 to bottom: 0.

HTML:

<div class='container'>
    <div class="containerLeft">
        <h2>1.</h2>
        <p>First, let's play a video.</p>
    </div>
    <div class="containerRight">
        <img src="http://tctechcrunch2011.files.wordpress.com/2012/09/michael-headshot-red.jpg?w=288" />
    </div>
</div>​

CSS:

.container { position: relative; }
.containerLeft { /* shorter column */
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 38%;
    padding: 2%;
    background-color: crimson;
}
.containerRight { /* taller column */
    margin: 0 0 0 42%;
    width: 58%;
    background: dodgerblue;
}​

如果您不确定其中哪一个会更高，那么您可以simulate他们是平等的事实height通过使用背景gradient在他们的父母身上。

demo

HTML 是一样的，CSS变成：

.container {
    overflow: hidden;
    background: -webkit-linear-gradient(left, crimson 42%, dodgerblue 42%);
    background: -moz-linear-gradient(left, crimson 42%, dodgerblue 42%);
    background: -o-linear-gradient(left, crimson 42%, dodgerblue 42%);
    background: linear-gradient(left, crimson 42%, dodgerblue 42%);
}
.containerLeft, .containerRight { float: left; }
.containerLeft {
    width:38%;
    padding: 2%;
}
.containerRight { width: 58%; }​

然而，CSS 渐变在 IE9 及更早版本中不起作用，所以如果你想要IE8+的解决方案，那么你可以尝试这个

demo

它使用:before and :after 伪元素.

.container {
    overflow: hidden;
    position: relative;
}
.container:before,.container:after {
    position: absolute;
    z-index: -1;
    top: 0; bottom: 0;
    content: '';
}
.container:before {
    left: 0;
    width: 42%;
    background: crimson;
}
.container:after {
    right: 0;
    width: 58%;
    background: dodgerblue;
}
.containerLeft, .containerRight { float: left; }
.containerLeft {
    z-index: 2;
    width:38%;
    padding: 2%;
}
.containerRight { width: 58%; }​