css - 让 div 填满剩余的空间

Question

小提琴

我想有多个带边距的 div，在它们下面有一个填充固定大小的父 div 提供的其余空间。

编辑：对不起，我应该提到容器 div 的大小是固定的，根本不应该改变。

EDIT2：解决方案。我曾尝试过溢出：隐藏但误解了它并将其放在子元素而不是父元素上。

Answer 1

希望这是你想要的http://jsfiddle.net/FR5Ud/33/

Answer 2

使用min-height以使您的页面基本外观保持不变，并根据内容增加

#container {
    float: left;
    background-color: green;
    width: 300px;
    min-height: 300px; height
    border-color: violet;
    border-style: solid;
    border-width: 10px;
}

#content {
    background-color: blue;
    min-height: 100px; height:auto
}

#toFillUp {
    background-color: red;
    /* that's what it should end up looking like.
    However, what if the size of #content changes?
    What if there are more content divs before that?
    What if those have margins? */
    min-height: 200px; height:auto
}​

演示http://jsfiddle.net/FR5Ud/25/