我的页面结构为：
<div class="parent">
<div class="child-left floatLeft">
</div>
<div class="child-right floatLeft">
</div>
</div>
现在，child-left DIV 将包含更多内容，因此parent DIV 的高度会随着子 DIV 的增加而增加。
但问题是child-right 高度没有增加。我怎样才能使它的高度等于它的父级？
【问题讨论】：
父母有身高吗？如果你像这样设置父母的身高。
div.parent { height: 300px };
然后你可以像这样让孩子伸展到全高。
div.child-right { height: 100% };
编辑
【讨论】：
我最近在我的网站上使用 jQuery 完成了这项工作。该代码计算最高 div 的高度，并将其他 div 设置为相同的高度。技巧如下：
http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/
我不相信height:100% 会起作用，所以如果你不明确知道 div 高度，我认为没有纯 CSS 解决方案。
【讨论】：
【讨论】：
CSS 表格显示非常适合：
.parent {
display: table;
width: 100%;
}
.parent > div {
display: table-cell;
}
.child-left {
background: powderblue;
}
.child-right {
background: papayawhip;
}<div class="parent">
<div class="child-left">Short</div>
<div class="child-right">Tall<br>Tall</div>
</div>原始答案（假设任何列都可能更高）：
你试图让父母的身高取决于孩子的身高，孩子的身高取决于父母的身高。不会计算。 CSS Faux columns 是最好的解决方案。有不止一种方法可以做到这一点。我宁愿不使用 JavaScript。
【讨论】：
display: table + display: table-cell 布局将产生所需的结果。
float 一起使用：stackoverflow.com/questions/20110217/…
此问题的常见解决方案是使用绝对定位或裁剪浮动，但这些方法很棘手，因为如果您的列的数量+大小发生变化，它们需要进行大量调整，并且您需要确保您的“主”列始终是最长。相反，我建议您使用三种更强大的解决方案之一：
display: flex：到目前为止最简单和最好的解决方案并且非常灵活 - 但不受 IE9 和更早版本的支持。table 或 display: table：非常简单，非常兼容（几乎所有浏览器），非常灵活。display: inline-block; width:50% with a negative margin hack：很简单，但列底边框有点棘手。display:flex
这真的很简单，而且很容易适应更复杂或更详细的布局 - 但仅 IE10 或更高版本（除了其他现代浏览器）支持 flexbox。
示例： 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 支持更多选项，但只要有上述任意数量的列就足够了！
<table> 或 display: table
一个简单且非常兼容的方法是使用table - 如果您需要旧版 IE 支持，我建议您先尝试一下。您正在处理列； divs + floats 根本不是最好的方法（更不用说多层嵌套 div 只是为了绕过 css 限制几乎没有比仅仅使用一个简单的表更“语义”）。如果您不想使用 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 更强大。您可以添加几乎任意数量的列；如果你愿意，你可以让它们自动缩放；并且您保留与古代浏览器的兼容性。与浮动解决方案不同，您也不需要事先知道哪一列最长；高度缩放就好了。
KISS：除非您特别需要，否则不要使用浮动技巧。如果 IE7 是一个问题，我仍然会选择一个带有语义列的普通表格，而不是一个难以维护、不太灵活的技巧 CSS 解决方案。
顺便说一句，如果您需要您的布局是响应式的（例如，在小型手机上没有列），您可以使用 @media 查询回退到小屏幕宽度的普通块布局 - 无论您使用 @ 987654341@ 或任何其他display: table 元素。
display:inline block 带有负边距黑客。另一种选择是使用display:inline block。
示例： 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 截断。请注意，除了 inline-blocks 之外，您还可以使用浮点数实现类似的效果。
TL;DR：如果可以忽略 IE9 及更早版本，请使用 flexbox；否则尝试（css）表。如果这些选项都不适合您，则存在负边距黑客，但这些可能会导致在开发过程中很容易错过的奇怪显示问题，并且您需要注意布局限制。
【讨论】：
border-spacing:10px; 在 table 元素上会引入类似边距的间距。或者，您可以在需要额外空间的位置添加额外（空）列。您还可以在表格单元格内添加填充；但是，该填充将包含在背景中，因此这可能不是您想要的。但你是对的，它不像正常保证金那样灵活。而且你不能相对于列定位任何东西，这可能是个问题。
请将父 div 设置为 overflow: hidden
然后在子 div 中，您可以为 padding-bottom 设置大量。例如padding-bottom: 5000px
然后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>【讨论】：
我找到了很多答案，但对我来说最好的解决方案可能是
.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/
【讨论】：
对于父母：
display: flex;
对于儿童：
align-items: stretch;
你应该添加一些前缀，检查 caniuse。
【讨论】：
我在评论区使用了这个：
.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 的宽度。
【讨论】：
如果您知道引导程序，您可以使用“flex”属性轻松完成。您需要做的就是将下面的 css 属性传递给父 div
.homepageSection {
overflow: hidden;
height: auto;
display: flex;
flex-flow: row;
}
.homepageSection 是我的父 div。
现在在您的 html 中添加子 div 为
<div class="abc col-md-6">
<div class="abc col-md-6">
abc 是我的子 div。您可以检查两个子 div 中的高度是否相等，而无需考虑边界，只需给子 div 提供边框
【讨论】：
<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>
<div class="child-right floatLeft" style="height:100%">
</div>
</div>
我使用内联样式只是为了给出想法。
【讨论】：
我在一次实习面试中了解到这个巧妙的技巧。最初的问题是如何确保三列中每个顶部组件的高度具有显示所有可用内容的相同高度。基本上创建一个呈现最大可能高度的不可见子组件。
<div class="parent">
<div class="assert-height invisible">
<!-- content -->
</div>
<div class="shown">
<!-- content -->
</div>
</div>
【讨论】：
我可以看到接受的答案使用position: absolute; 而不是float: left。如果您想使用具有以下结构的float: left，
<div class="parent">
<div class="child-left floatLeft"></div>
<div class="child-right floatLeft"></div>
</div>
将position: auto; 赋予父级，使其包含其子级的高度。
.parent {
position: auto;
}
.floatLeft {
float: left
}
【讨论】：