是否可以在没有内容的情况下扩展div的高度？

Question

我不知道为什么我今天似乎无法解决这个问题？ 通常向左或向右浮动一列是没有问题的。 我认为这个特殊情况是独特的，因为我实际上在左栏中没有任何内容。

问题在这个小提琴中列出。

问题是我需要右列中的内容来垂直拉伸左列。 我唯一能实现这个结果的方法是手动给左列增加一个高度。 谢谢你的帮助。

HTML

<div style="width: 940px;">
<div class="left"></div>
<div class="right">
    Main content blah blah blah
</div>
<div class="clr"></div>

CSS

.left {
    float: left;
    width: 30px;
    background-color:blue;
}
.right {
    float:left;
    background-color: red;
}

.clr {
    clear: both;
}

Answer 1

如果您必须使用浮动或想要旧的浏览器支持（IE7），您可以使用

.wrapper {
    width: 940px;
    overflow: hidden;
}
.left, .right {
    padding-bottom: 1000000px;
    margin-bottom: -1000000px;
    min-height: 1px;
}

其中1000000px可以是大于列高度的任何大值。

演示

Answer 2

我建议删除浮动和使用

.wrapper {
    display: table;
}
.left, .right {
    display: table-cell;
}

演示