自动高度父级的100%高度子div

Question

在过去的几个小时里,我一直在网上寻找我的问题的答案.我阅读了关于alistapart的Floats 101文章以及关于stackoverflow的大量类似问题.我想最后我问这个问题是为了防止我的脑袋爆炸.

我试图做的:一个宽度固定的容器包含一个100%宽度的div,它有两个孩子.div垂直扩展到其中的内容.这两个子元素在父div中形成列,因此浮动以将它们并排放置.左列扩展到父div的高度并具有背景颜色.右列没有背景颜色,并确定父div的高度.

这真的很难解释所以我试图创建一个例子:http: //jsfiddle.net/bituser/LzNuN/1/

我将衷心感谢您的帮助.谢谢

Answer 1

根本不要浮动右列,只要给它足够大的余量以容纳左列.浮动元素将从正常文档流中删除,并且不会对其父级的高度做出任何贡献; 所以,如果你漂浮左右两列,你的红色#box元素最终没有高度,你看不到它; 如果你停止浮动右列,那么它确实会确定高度#box.如果你根本没有浮动#right_column,那么它将扩展为使用所有可用的宽度#box.

像这样的东西:

<div id="container">
    <div id="box">
        <div id="left_column">
            <p>details stuff yada yada yada</p>
        </div>
        <div id="right_column">
            <p>other stuff yada yada yada test test test test test stuff stuff content content content content content stuff stuff example stuff test stuff content content stuff content example</p>
        </div>
    </div>
</div>

CSS:

#container {
    width: 400px;
}
#box {
    background-color: red;
}
#left_column {
    width: 200px;
    background-color: blue;
    float: left;
}
#right_column{
    margin: 0 0 0 200px;
    background-color: green;
}

更新小提琴:http://jsfiddle.net/ambiguous/eDTdQ/

或者,你可以添加width: 200px到#right_column并让它保持漂浮,然后添加overflow: hidden到#box,这样#box扩大到包含其浮动孩子:

#box {
    background-color: red;
    overflow: hidden;
}
#right_column{
    background-color: green;
    float: left;
    width: 200px;
}

这种方法的实时版本:http://jsfiddle.net/ambiguous/eDTdQ/2/

如果您希望右列自动拉伸并且您希望两列都是全高,那么您可以绝对定位左列而不是浮动它:

#box {
    background-color: red;
    position: relative;
}
#left_column {
    width: 200px;
    background-color: blue;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

直播:http://jsfiddle.net/ambiguous/3Cxe3/