Question

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

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

child-left DIV会有更多内容，因此父DIV的高度会根据孩子的DIV而增加。

但问题是儿童身高不会增加。我怎样才能让它的高度等于它的父母？

Answer 1

http://jsfiddle.net/r5h4w5s2/

.parent{
    width:200px;
    height:300px;
    border:1px solid black;
}

.child-left{
    float:left;
    border: 1px solid #FF0000;
    width:80px;
    height:100%;
}

.child-right{
    float:right;
    border: 1px solid #FF0000;
    width:80px;
    height:100%;
}

这是一个小样的小提琴。通过将高度设置为100％，它将占用其第一个父元素的高度。

Answer 2

像这样：

.parent{
  overflow: hidden;
}
.child-right{
  height: 100%;
}

Answer 3

这是一个常见问题，称为“平等高度列”，描述了here（2010年文章！）。我建议使用弹性盒解决方案或Javscript方法。

Answer 4

使用Flexbox

如果您不需要使用float元素，可以使用flexbox！请参阅以下代码：

.parent{
  width:200px;
  height:300px;
  border:1px solid black;
  display:flex;
  justify-content:space-between;
  align-items:stretch;
}

.child-left, .child-right{
  border: 1px solid #FF0000;
  width:80px;
}

如何扩展孩子＆＃34; div＆＃34;父母身高的高度

4 个答案: