Html 两个并列的浮动潜水器，高度相同

可能重复：

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

---

jsfiddle here:

浮动div的问题是它们被从正常流中取出。这意味着CSS解释器不知道父对象的大小，因此无法自动设置高度，您必须手动设置高度

---

这次对fiddle的更新应该让事情变得更清楚：

浮动div的问题是它们被从正常的流中取出。这意味着CSS解释器不知道父对象的大小，因此无法自动设置高度，您必须手动设置高度

---

这次对小提琴的更新应该让事情变得更清楚：

如果你知道两列中的一列总是比另一列高，那么你可以这样做：

只需将position:absolute指定给较短的列，并使其从顶部：0拉伸到底部：0

HTML:

如果您不确定其中哪一个会更高，则可以通过在其父对象上使用背景来模拟它们高度相等的事实

HTML是一样的，CSS变成：

但是，如果您想要IE8+的解决方案，那么您可以试试这个

它使用和

---

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

只需将position:absolute指定给较短的列，并使其从顶部：0拉伸到底部：0

HTML:

如果您不确定其中哪一个会更高，则可以通过在其父对象上使用背景来模拟它们高度相等的事实

HTML是一样的，CSS变成：

但是，如果您想要IE8+的解决方案，那么您可以试试这个

它使用和

---

可以从一根柱上剪裁底部：

我补充说：

.containerLeft {
    padding-bottom: 1005px;
    margin-bottom: -1000px;
}
.outer { overflow: hidden; } /* div around both columns */

.containerRight img {
    display: block;
}​

---

可以从一根柱上剪裁底部：

我补充说：

.containerLeft {
    padding-bottom: 1005px;
    margin-bottom: -1000px;
}
.outer { overflow: hidden; } /* div around both columns */

.containerRight img {
    display: block;
}​

---

+1：真的要挖第一个解决方案。很好，谢谢，安娜。关于你的第一个解决方案的问题。底部有一点空间，在右边的图片栏下面。无论如何，我们可以摆脱它。除此之外，谢谢！这里的后续回答：+1：真正挖掘第一个解决方案。很好，谢谢，安娜。关于你的第一个解决方案的问题。底部有一点空间，在右边的图片栏下面。无论如何，我们可以摆脱它。除此之外，谢谢！以下是跟进答案：

.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%; }​

.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%; }​

.containerLeft {
    padding-bottom: 1005px;
    margin-bottom: -1000px;
}
.outer { overflow: hidden; } /* div around both columns */

.containerRight img {
    display: block;
}​