Css 将div height设置为englobing div height

我有一个div，包含两个对齐的

div

s。不幸的是，右侧的

div

没有从其背景颜色可见的适当高度。我如何确保它将调整其高度至englobing

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>

JSFIDLE:

修改后的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>

浮动元素不能向其父元素显示其高度。这是因为还需要第三个带“clear:tware”的空DIV

---

这个解决方案有点问题，因为从浏览器的角度来看，它不是微不足道的，哪个元素的高度应该指定哪个元素。但在当前的浏览器（ie8+）中，这是可行的。

您可以使用定位来实现这一点：

#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*/
}

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

#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*/
}