Css 让div填满剩余的空间

我想有多个div与保证金和低于他们的一个，填补了固定大小的父div提供的其余空间

编辑：很抱歉，我应该提到容器divs的大小是固定的，不应该改变

编辑2:。 我尝试过溢出：隐藏但理解错误，并将其放在子元素而不是父元素上。

使用最小高度，以便页面的基本外观保持不变，并根据内容增加

#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
}​

---

演示

希望这是您想要的

请更具体一些。最小高度很好，但是css中有多余/空的浮动高度：并且没有引入顶部有边距的三个div。在顶部添加三个div很好，但是不需要浮动填充区域，有些人可能会打电话给OP，询问他们为什么会漂浮在容器的左侧——他们可能不需要：@pebbl——你是对的，只有当顶部被等分时。看到这个，希望你们明白我为什么用float:leftYep，不用担心，我明白了。如果是我，我会选择用户溢出：隐藏-这会减少与周围元素的复杂度，并且不太可能导致问题，因为用户通常不希望内容在元素之外被破坏。@pebbl overflow:hidden for toFillUp？你介意在上面复制这个吗？当然，只需将float:left替换为overflow:hidden——它的效果与使用float强制填充上方浮动div下方的填充区域相同。我的示例在顶部显示与您的示例相同的2x div。我只是倾向于反对浮动：由于网站的数量太多，我已经接管了剩余的过度使用浮动的责任，这会导致正常布局的行为出人意料。但这完全取决于偏好：