Html CSS-将子对象放在容器中

我正试图将两个孩子放在一个容器中而不让他们溢出。
以下是我的问题的一个例子：

我希望这样，如果存在

#footer

，它将占据容器的20%，而

#content

将填充其余的80%，并在必要时添加一个滚动条

---

我不想在

#内容

上设置80%的硬高度，因为有时

#页脚

不会出现，在这种情况下，我希望

#内容

占据100%的高度

您可以使用flexbox。通过使用

flex grow

属性，flex项可以增长以填充剩余空间

.container{
高度：200px；
宽度：100px；
边界：2px；
边框样式：实心；
显示器：flex；
弯曲方向：立柱；
}
.内容{
弹性：80%；/*从80%开始，然后增长以填充剩余空间*/
溢出：自动；/*如果内容太高*/
}
.页脚{
弹性：20%；/*从20%开始，然后增长以填充剩余空间*/
溢出：自动；/*如果内容太高*/
}

内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

页脚

内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

您可以使用flexbox。通过使用

flex grow

属性，flex项可以增长以填充剩余空间

.container{
高度：200px；
宽度：100px；
边界：2px；
边框样式：实心；
显示器：flex；
弯曲方向：立柱；
}
.内容{
弹性：80%；/*从80%开始，然后增长以填充剩余空间*/
溢出：自动；/*如果内容太高*/
}
.页脚{
弹性：20%；/*从20%开始，然后增长以填充剩余空间*/
溢出：自动；/*如果内容太高*/
}

内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

页脚

内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容