Css 自动高度父对象中的100%高度子对象div

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

我想做的是： 具有固定宽度的容器包含一个100%宽度的div，该div有两个子容器。div垂直扩展到其中的内容。因此，父div so中的两个子表单列将浮动以并排放置。左列扩展到父div的高度，并具有背景色。右列没有背景色，决定父div的高度

这真的很难解释，因此我尝试创建一个示例：

我非常感谢你的帮助。谢谢你看这个：

---

您需要将边距添加到总宽度中-右栏左侧的边距不是父栏左侧的边距，而是左栏左侧的边距，因此，如果总计为400px，左栏为200px，右栏也为200px，则没有边距空间

请不要浮动右栏，只要给它一个足够大的空间来容纳左列。浮动元素从正常文档流中删除，对其父元素的高度没有任何影响；因此，如果同时浮动右列和左列，则红色的

#box

元素最终没有高度，并且看不到它；如果停止浮动右列，则它将确定

#box

的高度。如果您根本没有浮动

#right_列

，则它将扩展到使用

#框

中的所有可用宽度

大概是这样的：

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

更新小提琴：

或者，您可以将

宽度：200px

添加到

#right#u列

并使其保持浮动，然后将

溢出：隐藏

添加到

#框

，以便

#框

展开以包含其浮动的子项：

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

此方法的实时版本：

如果希望右列自动拉伸，并且希望两列均为全高，则完全可以定位左列，而不是使其浮动：

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

---

现场直播：

谢谢。不过有几件事。我希望右列使用父div的所有剩余空间。因此，如果我将宽度更改为600px，它仍然会占用剩余空间。此外，我必须使第1列的高度与父列的高度相同，父列扩展到其中的内容。谢谢你所做的一切。我当然学到了一些东西。@Sam：你根本不需要浮动正确的列，不浮动正确的列会使它自动展开。你看到文章中的链接了吗？@MatTheCat没有，但谢谢。我现在就看。哇！谢谢。现在我唯一的问题是让左列扩展到父div的高度。我会认为，由于右列没有浮动，所以我可以将左列的高度设置为100%。我不能，因为它不是块元素吗？@Sam：我添加了一个更新，应该可以涵盖这一点。浮动元素不会以任何有用的方式关注高度：100%。太棒了。它起作用了。非常感谢你。如果我有名声，我会代表你，但看起来你已经有足够的名声了。我真的很感谢你花时间写了这么大和深入的答复。谢谢。@Sam:干杯，不用担心，很乐意帮忙。

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