我找到了很多答案，但可能对我来说最好的解决方案是

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

你可以在这里查看其他解决方案http://css-tricks.com/fluid-width-equal-height-columns/

我找到了很多答案，但可能对我来说最好的解决方案是

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

你可以在这里查看其他解决方案http://css-tricks.com/fluid-width-equal-height-columns/

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

div.parent { height: 300px };

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

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

EDIT

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

请将父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/

这个问题的一个常见解决方案是使用绝对定位或裁剪浮点数，但这很棘手，因为如果列的数量+大小发生变化，就需要进行大量调优，并且需要确保“主”列始终是最长的。相反，我建议你使用以下三种更可靠的解决方案之一:

display: flex:到目前为止最简单和最好的解决方案，非常灵活-但不支持IE9和更老版本。 表或显示:表:非常简单，非常兼容(几乎所有浏览器)，非常灵活。 显示:inline-block;宽度:50%与负边距hack:相当简单，但列底边界有点棘手。

1. 显示:flex

这真的很简单，而且很容易适应更复杂或更详细的布局-但flexbox只支持IE10或更高版本(除了其他现代浏览器)。

例如:http://output.jsbin.com/hetunujuma/1

相关html:

<div class="parent"><div>column 1</div><div>column 2</div></div>

相关的css:

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

Flexbox支持更多选项，但只要上面有任意数量的列就足够了!

2.<table>或display: table

一个简单且非常兼容的方法是使用表格-如果你需要旧的ie支持，我建议你先尝试一下。你在处理列;Divs + float并不是最好的方法(更不用说为了绕过CSS限制而使用多层嵌套的Divs几乎比使用一个简单的表更“语义”)。如果你不想使用table元素，考虑css display: table (IE7及更老版本不支持)。

例如:http://jsfiddle.net/emn13/7FFp3/

相关html:(但可以考虑使用普通的<table>代替)

<div class="parent"><div>column 1</div><div>column 2</div></div>

相关的css:

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

这种方法比使用overflow:hidden with floats健壮得多。你可以添加任意数量的列;如果你愿意，你可以让它们自动缩放;并且可以保持与老式浏览器的兼容性。与浮点解决方案不同的是，您也不需要事先知道哪一列最长;高度的比例很好。

KISS:除非你特别需要，否则不要使用浮动技巧。如果IE7是一个问题，我仍然会选择一个带有语义列的普通表，而不是一个难以维护、不那么灵活的css解决方案。

顺便说一下，如果你需要你的布局是响应式的(例如，在小手机上没有列)，你可以使用@media查询在小屏幕宽度上回落到普通块布局-无论你使用<table>还是任何其他display: table元素，这都是有效的。

3.显示:内联块与负边距hack。

另一种替代方法是使用display:inline块。

例如:http://jsbin.com/ovuqes/2/edit

相关的html:(div标签之间没有空格是很重要的!)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

相关的css:

.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent>div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

这有点棘手，负边距意味着列的“真实”底部被掩盖了。这反过来意味着你不能相对于这些列的底部定位任何东西，因为这被overflow: hidden截断了。注意，除了内联块之外，还可以使用浮动实现类似的效果。

---

TL;DR:如果可以忽略IE9及以上版本，请使用flexbox;否则，尝试(css)表。如果这两种方法都不适合你，那就存在一些负面的边际问题，但这也会导致一些在开发过程中很容易被忽略的奇怪的显示问题，并且你还需要注意一些布局限制。

我在评论区用了这个:

.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的宽度。