我可以看到公认的答案使用位置:绝对;而不是float: left。如果你想使用float:留给下面的结构，

<div class="parent">
    <div class="child-left floatLeft"></div>
    <div class="child-right floatLeft"></div>
</div>

给出位置:自动;赋给父节点，以包含子节点的高度。

.parent {
    position: auto;
}
.floatLeft {
    float: left
}

对于父元素，添加以下属性:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

然后是。child-right这些:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

在这里可以找到更多关于CSS示例的详细结果，在这里可以找到关于等高列的更多信息。

父结点有身高吗?如果你像这样设置父结点高度。

div.parent { height: 300px };

然后你可以让孩子像这样伸展到全身高度。

div.child-right { height: 100% };

EDIT

下面是如何使用JavaScript实现的。

我可以看到公认的答案使用位置:绝对;而不是float: left。如果你想使用float:留给下面的结构，

<div class="parent">
    <div class="child-left floatLeft"></div>
    <div class="child-right floatLeft"></div>
</div>

给出位置:自动;赋给父节点，以包含子节点的高度。

.parent {
    position: auto;
}
.floatLeft {
    float: left
}

我在评论区用了这个:

.parent { display: flex; float: left; border-top:2px solid black; width:635px; margin:10px 0px 0px 0px; padding:0px 20px 0px 20px; background-color: rgba(255,255,255,0.5); } .child-left { align-items: stretch; float: left; width:135px; padding:10px 10px 10px 0px; height:inherit; border-right:2px solid black; } .child-right { align-items: stretch; float: left; width:468px; padding:10px; } <div class="parent"> <div class="child-left">Short</div> <div class="child-right">Tall<br>Tall</div> </div>

您可以将child-right浮动到右边，但在这种情况下，我已经精确地计算了每个div的宽度。

请将父div设置为overflow: hidden 然后在儿童潜水你可以设置大量填充底部。例如 padding-bottom: 5000像素 然后margin-bottom: -5000px 然后所有子div都是父节点的高度。 当然，这不会工作，如果你试图把内容放在父div(外面的其他div是)

.parent{ border: 1px solid black; overflow: hidden; height: auto; } .child{ float: left; padding-bottom: 1500px; margin-bottom: -1500px; } .child1{ background: red; padding-right: 10px; } .child2{ background: green; padding-left: 10px; } <div class="parent"> <div class="child1 child"> One line text in child1 </div> <div class="child2 child"> Three line text in child2<br /> Three line text in child2<br /> Three line text in child2 </div> </div>

例如:http://jsfiddle.net/Tareqdhk/DAFEC/