css - 自动高度父级中的 100% 高度子 div

Question

在过去的几个小时里，我一直在网上四处寻找我的问题的答案。我阅读了关于 alistapart 的 Floats 101 文章以及关于 stackoverflow 的大量类似问题。我想我终于该问这个问题了，以免我的脑袋爆炸。

我想做的是:一个固定宽度的容器包含一个 100% 宽度的 div，它有两个 child 。 div 垂直扩展到其中的内容。这两个子项在父级 div 中形成列，因此 float 以将它们并排放置。左列扩展到父 div 的高度并具有背景色。右列没有背景颜色，并确定父 div 的高度。

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

非常感谢您的帮助。谢谢

Answer 1

根本不要 float 右列，只要给它足够大的边距以容纳左列即可。 float 元素从正常的文档流中移除，并且对它们父元素的高度没有任何贡献；所以，如果你同时 float 左右两列，你的红色 #box 元素最终没有高度，你也看不到它；如果您停止 float 右侧的列，那么它将真正确定 #box 的高度。如果您根本不 float #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;
}

更新 fiddle :http://jsfiddle.net/ambiguous/eDTdQ/

或者，你可以在 #right_column 中添加一个 width: 200px 并让它保持 float ，然后在 中添加 overflow: hidden >#box 以便 #box 展开以包含其 float 的子项:

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

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

如果您希望右列自动拉伸(stretch)并且您希望两列都是全高，那么您完全可以定位左列而不是 float 它:

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