Html 如何使div始终保持所有剩余高度，并在溢出时保持滚动？

我有一个这样的布局

html，
身体{
身高：100%；
保证金：0；
填充：0；
}
桌子{
边框：实心1px；
}
.主分区{
身高：100%；
}
.集装箱{
身高：100%；
}
.顶{
宽度：100%；
背景：红色；
}
.底部{
高度：计算（100%-1米）；
溢出y：未设置；
背景：蓝色；
}
.桌板{
溢出y：滚动；
身高：100%；
背景颜色：绿色；
}
.工作区{
高度：计算（100%-20px）；
}
.页脚{
高度：20px；
}

一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
页脚文本

不确定这是否是您正在寻找的，但如果您将

容器上的
高度更改为
计算（100%-20px）由于页脚锁定在20px，似乎可以解决问题

编辑：
我注意到调整蒸馏器的尺寸有问题。我制作了
.container
和
.bottom
柔性容器，制作了
.bottom
和
柔性容器。桌面面板
具有
flex:1的柔性儿童参见更新的JSFIDLE

不确定这是否是您正在寻找的，但如果您将
容器上的
高度更改为
计算（100%-20px）由于页脚锁定在20px，似乎可以解决问题

编辑：
我注意到调整蒸馏器的尺寸有问题。我制作了
.container
和
.bottom
柔性容器，制作了
.bottom
和
柔性容器。桌面面板
具有
flex:1的柔性儿童参见更新的JSFIDLE

使用，您可以使用列方向并使用属性
grow
和
shrink

注意：我已经移除了您的一些容器


html，正文{
身高：100%；
保证金：0；
填充：0；
}
桌子{
边框：实心1px；
}
.主分区{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.工作区{
flex:1自动；
显示器：flex；
弯曲方向：立柱；
}
.页脚{
高度：20px；
}
.顶{
背景：红色；
}
.底部{
flex:1自动；
溢出y：自动；
背景：绿色；
}

一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
页脚文本
使用，您可以使用列方向并使用属性
grow
和
shrink

注意：我已经移除了您的一些容器


html，正文{
身高：100%；
保证金：0；
填充：0；
}
桌子{
边框：实心1px；
}
.主分区{
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
.工作区{
flex:1自动；
显示器：flex；
弯曲方向：立柱；
}
.页脚{
高度：20px；
}
.顶{
背景：红色；
}
.底部{
flex:1自动；
溢出y：自动；
背景：绿色；
}

一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本一些文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
单元格文本
页脚文本
现在Layout可以这样做了

现在大多数浏览器中都有


*{
框大小：边框框；
保证金：0；
填充：0；
}
.集装箱{
高度：100vh；
显示：网格；
网格模板行：自动1fr自动；
}
.容器>*{
边框：1px纯绿色；
}
.内容{
溢出y：自动；
}

标题
内容
Lorem ipsum dolor sit amet，奉献精英。我们的目的是为了让我们的建筑设计师们更清楚地认识到这一点！在圣沃卢普塔特省，自由党协会，根据《国际公共部门会计准则》（accusantium illo ipsa Teneur Reiciens repudiandae quo）进行的会计核算
阿尼米在瑞伦！我们发明了一种新的生命体。不可预见的后果，解决方案，不可预见的后果，不可预见的后果，以及不可预见的后果。我坐尼西·阿尼米
铜酸盐的特殊性和代表性、暂时性软膏、自由的暂时性尊严、透明的个人生命。这是一个很好的例子。痣
工作场所、办公室和实验室的工作人员