如何擴大孩子「格」的高度，以高度的父母

Question

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

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

孩子左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%; 
} 

這裏是一個axample小提琴。 通過將高度設置爲100％，它將採用其第一個父元素的高度。

Answer 2

像這樣：

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

Answer 3

這是一個常見的問題，被稱爲高度相等列，描述here（2010年的文章！）。我會建議Flex盒解決方案或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; 
}