CSS如何填充容器的高度？

我有一个容器和两个div：

容器具有固定的500px高度。 我不知道头的大小，但我想用身体填满所有容器的高度。 我尝试将此高度值设置为body：

• 100%：不起作用，因为主体从其父级（容器）获得500px的高度并溢出
• auto：主体可能是空的，或者只有一些较短的内容，在这种情况下，主体高度将低于自由容器空间

如何用配件填充容器

下面是一个例子：

#body{ height 100%; }

---

可以使用

显示：表格/表格行

：

html{
框大小：边框框；
}
*，*：之前，*：之后{
框大小：继承；
}
身体{
保证金：0；
}
.集装箱{
显示：表格；
宽度：100%；
高度：500px；
背景色：红色；
填充：0 10px；
}
.头{
显示：表格行；
}
.头{
背景颜色：蓝色；
}
.身体{
背景颜色：黄色；
身高：100%；
}

一些头
foobar可以使用
显示：表格/表格行
：


html{
框大小：边框框；
}
*，*：之前，*：之后{
框大小：继承；
}
身体{
保证金：0；
}
.集装箱{
显示：表格；
宽度：100%；
高度：500px；
背景色：红色；
填充：0 10px；
}
.头{
显示：表格行；
}
.头{
背景颜色：蓝色；
}
.身体{
背景颜色：黄色；
身高：100%；
}

一些头
foobar这就是它的用途：


.container{
显示器：flex；
弯曲方向：立柱；
高度：500px；
填充：10px；
背景颜色：黄色；
}
.标题{
背景颜色：浅蓝色；
}
.身体{
弹性：1；
背景色：番茄；
}

标题
未知
高度
这是为以下目的而制作的：


.container{
显示器：flex；
弯曲方向：立柱；
高度：500px；
填充：10px；
背景颜色：黄色；
}
.标题{
背景颜色：浅蓝色；
}
.身体{
弹性：1；
背景色：番茄；
}

标题
未知
高度
您是否已经有任何代码？头部和身体高度值未知？如果您的身体是容器标签的子项，那么高度=100%应该可以工作。如果没有，那么您可以使用JavaScript/jQueryYes，这取决于内容……我添加了小提琴，因为您可以看到高度100%不起作用，因为它会由于头部高度而溢出容器。您是否已经有任何代码？头部和身体高度值未知？如果您的身体是容器标记的子对象，那么高度=100%应该起作用。如果没有，那么您可以使用JavaScript/jQueryYes，这取决于内容……我添加了小提琴，因为您可以看到高度100%不起作用，因为它会因头部高度而溢出容器。我喜欢flexbox，但仍然存在关于“旧”的问题IE版本。@Vucko我试图通过不支持那些旧版本并强制用户更新来让internet变得更好；）（是的，我知道，在很多环境中都不可能…@Vucko Old IE（没有flexbox）只占全球使用量的2.23%。其余部分使用支持flexbox的浏览器。你算一下……我喜欢flexbox，但关于“旧”IE版本仍然存在一个问题。@Vucko我试图通过不支持那些旧版本并强制用户更新来让互联网变得更好；）（是的，我知道，在很多环境中都不可能…@Vucko Old IE（没有flexbox）只占全球使用量的2.23%。其余部分使用支持flexbox的浏览器。你算一下。。。