自动高度父级中的 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/

Answer 2

看看这个：http://jsfiddle.net/LzNuN/3/ 您需要将边距添加到总宽度 - 右列的左边距不是父级的左边距，它是左列的左边距，所以如果你的总宽度是 400 像素，你的左列是 200 像素，你的右列也是200px 没有留余地