绝对定位但调整父级的大小

我正在尝试编写一个 div 中包含 2 个 div 的 html 代码。 有一个没有宽度和高度的父div。宽度是浏览器宽度，没有指定高度。 我想要在这个父 div 内有 2 个 div：第一个需要具有宽度或 250px，第二个需要具有屏幕宽度的其余部分。他们都缺少高度..取决于里面有多少内容。 现在我试图把它变成这样：

<div id="calendar">
        <section id="list">
        </section>

        <section id="grid">
        </section>
</div>

和CSS像这样：

#calendar {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
#calendar #list {
    background: #f00;
    position: absolute;
    width: 250px;
    left: 0;
    top: 0;
}
#calendar #grid {
    background: #0f0;
    position: absolute;
    left: 250px;
    top: 0;
    right: 0;
}

现在的问题是，当我向子 div 添加内容时，父 div 不会调整大小

我希望 CSS 有一个解决方法来解决这个问题，因为通过 JS 来解决这个问题会很糟糕。

先感谢您， 丹尼尔！

这是我的解决方案->http://tinkerbin.com/Z8mJmItU http://tinkerbin.com/Z8mJmItU

以给定的宽度浮动 #list，然后为 #grid 提供相同的左边距。

然后，为了使两列看起来都具有父容器高度的 100%，您需要一个图像。在您必须使用“实际图像”之前。如今，您可以简单地依靠 css3 渐变作为背景，从而使您的页面加载速度更快（对图像的 http 请求减少 1 个）。它可能看起来更复杂，但实际上并没有“那么”复杂。它甚至最终为您提供了更大的灵活性，因为您可以更改列的宽度和颜色，而无需创建新图像。你所需要的只是改变CSS。