Html CSS 100%高度布局，带有可滚动的表体

我有一个100%高度的布局分为三部分：页眉，内容，页脚

我想在内容部分中显示一个高度为100%的表格，我希望表体有一个垂直滚动条，用于显示表体内容

我该怎么做

似乎我无法将车身高度设置为100%并设置滚动条

html，正文{
身高：100%；
填充：0；
保证金：0；
}
#容器{
显示：表格；
宽度：100%；
身高：100%；
边框：1px纯红；
文本对齐：居中；
}
#容器>分区{
显示：表格行；
宽度：100%；
}
#容器>分区>分区{
显示：表格单元格；
宽度：100%；
边界半径：10px；
}
#标题>div{
高度：50px；
边框：实心2px#aaa；
}
#内容>分区{
身高：100%；
背景#f0f4f0；
边框：实心2px#5a5；
}
#页脚>div{
高度：50px；
边框：实心2px#a55；
}
桌子{
表布局：固定；
保证金：自动；
}
th，td{
填充物：5px10px；
边框：1px实心#000；
}
西亚德{
背景#f9f9f9；
显示：表格；
宽度：100%；
宽度：钙（100%-18px）；
}
t车身{
高度：400px；
溢出：自动；
溢出x：隐藏；
显示：块；
宽度：100%；
}
tbody tr{
显示：表格；
宽度：100%；
表布局：固定；
}

标题
标题1
标题2
标题3
标题4
细胞2含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
细胞含量
页脚1
页脚2
页脚3
页脚4
页脚

我不得不使用javascript来实现这一点，但也许有人能想出一个纯CSS解决方案

页面的主要部分 我使用flexbox定位页面的

页眉

、

主

和

页脚

部分，从而允许

主

占据尽可能多的垂直空间：

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

桌子 我将

表格

设置为占据

主

部分高度和宽度的100%，并将每个

tr

元素设置为显示flex，允许其所有直接子元素占据相等的空间：

table {
  width: 100%;
  height: 100%;
}

tr {
  display: flex;
}
tr > * {
  flex: 1;
}

我已经定好了

tbody {
  display: block;
  overflow-y: scroll;
}
tbody tr {
  height: 40vh; // for demonstrating the scrolling of the tbody
}

display: flex;
flex-direction: column;
overflow: auto;