CSS-将浮动子级DIV高度扩展到父级的高度

我的页面结构为：

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

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

现在，child-leftDIV将具有更多内容，因此parentDIV的高度将随子DIV而增加。

但是问题是child-right身高没有增加。如何使它的高度等于父代的高度？

对于parent元素，添加以下属性：

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

然后针对.child-right这些：

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

找到CSS的例子更详细的结果在这里和大约等于身高列的详细信息在这里。

解决此问题的常见方法是使用绝对定位或裁剪浮点，但这些技巧很棘手，因为如果列的数字和大小发生变化，它们需要进行大量调整，并且需要确保“主”列始终是最长的。相反，我建议您使用三个更强大的解决方案之一：

1. display: flex：到目前为止，这是最简单，最好的解决方案，而且非常灵活-但IE9和更早版本不支持。
2. table或display: table：非常简单，非常兼容（几乎所有浏览器都非常兼容），非常灵活。
3. display: inline-block; width:50% 带有负边距hack：很简单，但是列底边框有点棘手。

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 +浮点数绝对不是做到这一点的最佳方法（更不用说一个事实，即多层divs只是为了绕过css的限制，它比仅仅使用一个简单的表更“语义化”）。如果您不想使用该table元素，请考虑使用cssdisplay: 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浮点数要健壮得多。您可以添加几乎任何数量的列；您可以根据需要使它们自动缩放；并且您保留了与旧版浏览器的兼容性。与float解决方案不同，您也不需要事先知道哪一列最长。高度比例很好。

吻：除非您特别需要，否则请勿使用浮动技巧。如果IE7成为问题，那么我仍然会每天选择一个带有语义列的普通表，该表具有难以维护，灵活性较差的特技CSS解决方案。

顺便说一句，如果您需要布局具有响应性（例如，小型手机上没有列），则可以使用@media查询返回到小块屏幕宽度的纯块布局-无论您使用<table>还是其他任何display: table元素都可以使用。

3. 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）表。如果这些选项都不适合您，则可能会出现负边距hack，但是这些会导致奇怪的显示问题，在开发过程中很容易错过，并且您需要注意布局限制。

对于父母：

display: flex;

为儿童：

align-items: stretch;

您应该添加一些前缀，检查caniuse。

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

.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设置为，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>

示例：http：//jsfiddle.net/Tareqdhk/DAFEC/

父母有身高吗？如果您像这样设置父母身高。

div.parent { height: 300px };

然后，您可以像这样使孩子伸展到最大高度。

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

编辑

这是使用JavaScript的方法。

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列是最好的解决方案。有多种方法可以做到这一点。我宁愿不使用JavaScript。

我最近在我的网站上使用jQuery完成了此操作。该代码计算最高div的高度，并将其他div设置为相同的高度。这是技巧：

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

我不相信它height:100%会起作用，所以如果您不明确知道div的高度，我认为没有纯粹的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>

您可以将子项向右浮动，但在这种情况下，我已经精确计算了每个div的宽度。

如果您知道引导程序，则可以通过使用'flex'属性轻松地完成它。您需要做的就是将CSS属性下面的值传递给父div

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

.homepageSection我父母的div 在哪里。现在在您的html中将child 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>