展开将子DIV高度浮动到父母的身高
我有页面结构为：
<div class="parent">
<div class="child-left floatLeft">
</div>
<div class="child-right floatLeft">
</div>
</div>
现在， child-left DIV会有更多的内容，所以parent DIV的高度会随着孩子DIV的增加而增加。
但问题是child-right高度并没有增加。 我怎样才能让自己的身高与父母相等呢？
为父元素添加以下属性
.parent {
overflow: hidden;
position: relative;
width: 100%;
}
那么对于.child-right这些：
.child-right {
background:green;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
你可以在这里用CSS例子找到更详细的结果：http://jsbin.com/nimeguxuda/1/edit?html,css,output
你可以在http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks找到更多有关同等高度柱的信息。
这个问题的常见解决方案是使用绝对定位或裁剪浮点数，但这些都很棘手，因为如果列的数量和大小发生变化，需要进行大量调整，并且需要确保“主”列始终最长。 相反，我建议你使用三个更强大的解决方案之一：
display: flex ：迄今为止最简单和最好的解决方案，并且非常灵活 - 但IE9和更老版本不支持。 table或display: table ：非常简单，非常兼容（几乎每个浏览器都有），非常灵活。 display: inline-block; width:50% display: inline-block; width:50% ，利润率为负值：非常简单，但是列底边框有点棘手。 1. display: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
一个简单和极其兼容的方法是使用table - 我建议您先尝试一下，如果您需要旧的IE支持 。 你正在处理专栏; divs + float并不是最好的方式（更不用说多层嵌套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更加健壮overflow:hidden着浮动。 您可以添加几乎任意数量的列; 如果你愿意，你可以让它们自动缩放; 并保持与古代浏览器的兼容性。 与浮动解决方案不同，您不需要事先知道哪一列最长; 高度尺度很好。
KISS：除非你特别需要，否则不要使用浮动黑客。 如果IE7是一个问题，我仍然会选择一个带有语义列的普通表格，而不是在任何一天难以维护，灵活性较低的trick-CSS解决方案。
顺便说一句，如果你需要你的布局有反应（例如，小手机上没有列），你可以使用@media查询返回到小块屏幕宽度的普通块布局 - 无论使用<table>还是任何其他display: table元素。
3. display:inline block带有负边距黑客的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关闭了。 请注意，除了内联块之外，您还可以使用浮动块实现类似的效果。
TL; DR ：如果您可以忽略IE9及更早版本，请使用flexbox ; 否则尝试一个（CSS）表。 如果这些选项都不适合您，则会出现负边际黑客攻击，但这些可能会导致在开发期间很容易漏掉的奇怪显示问题，并且您需要注意布局限制。
我找到了很多答案，但对我来说可能是最好的解决方案
.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/
链接地址: http://www.djcxy.com/p/16955.html