Html 使元素填充剩余空间

我有一个简单的HTML文档。我有一个

标题

、一个

节

和一个

div

（其中包含未知数量的其他

div

）

收割台和剖面没有（也不能）设置高度。他们的高度来自于内容。只有它们的宽度是已知的（设置为100%）

是否可以使用flexbox或其他方式获取每个子

div

，在这种情况下，将

class=“fill”

作为主体高度减去标题和部分

换句话说，当有人进入页面时，我希望他们看到标题和部分，然后让第一个

div.fill

一直到达底部，迫使他们滚动查看下一个div（但不要滚动查看第一个子

div

的底部）

我正在使用一个模板系统，所以不幸的是HTML的结构不能改变，我只想在CSS中这样做

标题内容，可能包含图像
这是子标题，高度未知
我想要
每一个
成为
车身高度-收割台-截面

正文{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
保证金：0；
}
.集装箱{
弹性：1；/*1*/
显示器：flex；
弯曲方向：立柱；
溢出y：滚动；
}
.fill{flex:0 100%；}/*2*/
标题{背景色：浅绿色；}
部分{背景色：橙色；}
.fill:n个子（奇数）{背景色：黄色；}
.fill:n子项（偶数）{背景色：浅绿色；}

标题内容，可能包含图像
这是子标题，高度未知
我想要
每一个
成为
车身高度-收割台-截面

如果您稍微更改元素的结构，您只需使用css即可获得它。
基本上添加第一个

。在容器中填充
元素，其中包含标题和节（我们称之为
first
）。对于其他div，使用
高度：100vh


正文{
保证金：0；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
.填充{
高度：100vh；
溢出：自动；
}
.首先{
弹性：1；
}
标题{背景色：浅绿色；}
部分{背景色：橙色；}
.first、.fill:n子项（奇数）{背景色：黄色；}
.fill:n子项（偶数）{背景色：浅绿色；}

标题内容，可能包含图像
这是子标题，高度未知
我想要
每一个
成为
车身高度-收割台-截面
基于JS的解决方案合适吗？不，我不能使用JS解决这个问题：/我喜欢这个解决方案，但不幸的是，这会切断一些第一部分。我使用的是图像，所以我不希望一开始就切断图像的底部。不确定纯CSS是否可行。我已经准备好了所有的东西，但是我们需要告诉每个
。填充
物品以占据容器的整个高度。CSS只能告诉他们在他们之间分配可用高度。您可能需要JS。您的回答非常好，非常接近，非常感谢。看来应该有办法做到这一点。嗨@Startec，我更新了我的答案。有了新的浏览器版本，允许百分比高度使用flex heights作为参考（），您的布局现在可以在纯CSS中实现。在Chrome、Firefox和Edge中测试。