Question

我有一个包含两个对齐div的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。

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

将div高度设置为吞噬div高度

2 个答案: