Question

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

问题在Fiddle中列出。

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

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可以是任何大于列高度的大值。

Demo

Answer 2

我建议删除浮动并使用

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

Demo

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

2 个答案: