將div高度設置爲包圍div高度

Question

我有一個包含兩個對齊的div s的div。不幸的是，正確的div沒有合適的高度，從背景顏色中可以看到。我怎樣才能確保它的高度能夠接近div？

的HTML：

<div id="engl"> 
    <div id="lleft">Some text text 
    text text text text text text 
    text text text text text text 
    </div> 
    <div id="rright">Other text</div> 
</div> 

的CSS：

#engl { 
    background-color: red; 
    width: 200px; 
    height: auto; 
    overflow: auto; 
} 

#lleft { 
    background-color: yellow; 
    width: 140px; 
    padding: 10px; 
    float: left; 
} 

#rright { 
    background-color: green; 
    width: 40px; 
    float: left; 
    height: inherited; 
} 

的的jsfiddle：http://jsfiddle.net/9bLLN/1/

Answer 1

你可以使用定位要做到這一點：

#engl { 
    background-color: red; 
    width: 200px; 
    height: auto; 
    overflow: auto; 
    position:relative; /*NEW*/ 
} 
#lleft { 
    background-color: yellow; 
    width: 140px; 
    padding: 10px; 
    float: left; 
} 
#rright { 
    background-color: green; 
    width: 40px; 
    float: left; 
    height: inherited; 
    position: absolute; /*NEW*/ 
    top:0; /*NEW*/ 
    bottom:0; /*NEW*/ 
    right:0; /*NEW*/ 
} 

jsFiddle example

Answer 2

修改後的HTML：

<div id="engl"> 
    <div id="lleft">Some text text 
    text text text text text text 
    text text text text text text 
    </div> 
    <div id="rright">Other text</div> 
    <div style="clear: both"></div> 
</div> 

修改後的CSS：

#rright { 
    background-color: green; 
    width: 40px; 
    float: left; 
    height: 100%; 
} 

浮動元素不能說他們的高度，以他們的父母。這是因爲還需要第三個帶有「clear：both」的空DIV。

這個解決方案有點問題，因爲從瀏覽器的角度來看，它不是微不足道的，哪個元素的高度應該指定哪一個。但目前的瀏覽器（即8 +）的作品。