css - 将 div 高度设置为 englobing div 高度

Question

我有一个包含两个对齐的 div 的 div。不幸的是，右侧的 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>

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