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

我是在实习面试中了解到这一巧妙技巧的。最初的问题是如何确保三列中每个顶部组件的高度都具有相同的高度，以显示所有可用内容。基本上创建一个不可见的子组件，以呈现最大可能的高度。

<div class="parent">
    <div class="assert-height invisible">
        <!-- content -->
    </div>
    <div class="shown">
        <!-- content -->
    </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>

我使用内联样式只是为了提出想法。

我将其用于注释部分：

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

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

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

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

对于父母：

display: flex;

为儿童：

align-items: stretch;

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

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

div.parent { height: 300px };

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

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

编辑

这是使用JavaScript的方法。

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

对于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的例子更详细的结果在这里和大约等于身高列的详细信息在这里。