CSS – 展开浮动子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; }
你可以在这里find更详细的CSS例子： http : //jsbin.com/nimeguxuda/1/edit?html ,css, output
你可以在http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacksfind更多有关等高柱的信息。;
这个问题的一个常见的解决scheme是使用绝对定位或裁剪的浮动，但是这些都很棘手，因为如果你的列的数量和大小发生变化，你需要确保你的“主”列总是最长的。 相反，我build议你使用三个更强大的解决scheme之一：
-
display: flex：迄今为止最简单和最好的解决scheme ，非常灵活 – 但不支持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 – 我build议您先尝试一下，如果您需要旧的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着浮动。 您可以添加几乎任何数量的列; 你可以让它们自动缩放，如果你想要的话; 并保持与古代浏览器的兼容性。 不像浮动解决scheme需要，你也不需要事先知道哪一列是最长的; 高度很好。
KISS：不要使用浮动黑客，除非你特别需要。 如果IE7是一个问题，那么我仍然会select一个带有语义列的普通表格，而不是在任何一天都难以维护，灵活性较小的trick-CSS解决scheme。
顺便说一句，如果你需要你的布局是响应式的（例如，在小型手机上没有列），你可以使用@media查询返回@media布局的小屏幕宽度 – 无论使用<table>还是任何其他display: table元素。
3. display:inline block带有负边距的display:inline block 。
另一种select是使用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）表。 如果这两个选项都不适用于您，则会出现利润率下降的情况，但是这些可能会导致在开发过程中很容易遗漏的奇怪显示问题，并且您需要注意布局限制。
我find了很多答案，但对我来说可能是最好的解决scheme
.parent { overflow: hidden; } .parent .floatLeft { # your other styles float: left; margin-bottom: -99999px; padding-bottom: 99999px; }
您可以在这里查看其他解决schemehttp://css-tricks.com/fluid-width-equal-height-columns/
对于父母：
display: flex;
为儿童：
align-items: stretch;
你应该添加一些前缀，检查caniuse。
请设置父div以overflow: hidden
那么在孩子divs你可以设置一个很大的填充底部的金额。 例如
padding-bottom: 5000px
然后margin-bottom: -5000px
然后所有的小孩子都会成为父母的高度。
当然，这不会工作，如果你试图把内容放在父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>
父母是否有身高？ 如果你这样设定父母的身高。
div.parent { height: 300px };
然后你可以让孩子像这样伸展到全高。
div.child-right { height: 100% };
编辑
这里是你如何使用JavaScript来做到这一点。
我最近使用jQuery在我的网站上做了这个。 该代码计算最高的div的高度，并将其他div设置为相同的高度。 这是技术：
http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/
我不相信height:100%会工作，所以如果你不明确知道div高度，我不认为有一个纯粹的CSS解决scheme。
我用这个评论部分：
.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>
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>
如果你意识到bootstrap，你可以通过使用'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.You可以检查高度平等的两个孩子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>
我使用内联样式来给出想法。
我在实习面试中了解到这个巧妙的诀窍。 原来的问题是，如何确保三列中每个顶部组件的高度具有相同的高度，以显示所有可用的内容。 基本上创build一个不可见的子组件，它呈现最大可能的高度。
<div class="parent"> <div class="assert-height invisible"> <!-- content --> </div> <div class="shown"> <!-- content --> </div> </div>
