Html 内有桌子的柔性容器

我有一个包含3个div flex子元素的容器网格。第一个是页眉（固定），第二个是正文，第三个是页脚（固定）。我的身体里有一张桌子。我希望在调整窗口大小时，通过应用tbody的overflow-y，将“body”部分中的表保留在该部分中，以便该表永远不会“拉伸”它所在的部分。一些想法

在第一张图中，我将表格放在黄色主体内，主体为tbody.height=600px。黄色主体是660px。如果我调整窗口的大小，情况就像第二个图像一样。scollbar显示在窗口中，因为表格的高度超过黄色高度。在这种情况下，页脚（橙色）将消失。当我调整窗口大小时，我希望窗口滚动条不会出现，但会降低表格的高度，以便只有表格滚动条出现在第三幅图像中。

---

最好看一个例子

但现在我可以提出以下建议：

Header元素有

位置：fixed

和

顶部：0

，如您所说

中间元素具有

填充顶部：100px

（与页眉高度相同）和

填充底部：100px

（与页脚高度相同）

Footer元素有

位置：fixed

和

底部：0

，如您所说

在这种情况下，您将使用

body

标准滚动

请添加一些实例，这样我可以回答得更准确。你可以用

已更新

正如我所建议的-这里是一个仅滚动

body

的示例

*{
框大小：边框框；
}
html{
身高：100%；
}
身体{
最小高度：100%；
保证金：0；
填充：0；
}
.标题{
位置：固定；
左：0；
排名：0；
宽度：100%；
高度：50px；
z指数：2；
背景：#1c679a；
}
.页脚{
位置：固定；
左：0；
底部：0；
宽度：100%；
高度：50px；
z指数：2；
背景：#1c9a25；
}
.集装箱{
位置：相对位置；
z指数：1；
衬垫顶部：50px；/*与收割台高度相同*/
填充底部：50px；/*与.页脚高度相同*/
}
.桌子{
宽度：100%；
边界：0；
}
.表thead th{
位置：粘性；
顶部：50px；/*与收割台高度相同*/
背景：#ccc；
边界：0；
}

标题
标题
标题
标题
1.
1.
1.
1.
2.
2.
2.
2.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
最后的
最后的
最后的
最后的

最好看一个例子

但现在我可以提出以下建议：

Header元素有

位置：fixed

和

顶部：0

，如您所说

中间元素具有

填充顶部：100px

（与页眉高度相同）和

填充底部：100px

（与页脚高度相同）

Footer元素有

位置：fixed

和

底部：0

，如您所说

在这种情况下，您将使用

body

标准滚动

请添加一些实例，这样我可以回答得更准确。你可以用

已更新

正如我所建议的-这里是一个仅滚动

body

的示例

*{
框大小：边框框；
}
html{
身高：100%；
}
身体{
最小高度：100%；
保证金：0；
填充：0；
}
.标题{
位置：固定；
左：0；
排名：0；
宽度：100%；
高度：50px；
z指数：2；
背景：#1c679a；
}
.页脚{
位置：固定；
左：0；
底部：0；
宽度：100%；
高度：50px；
z指数：2；
背景：#1c9a25；
}
.集装箱{
位置：相对位置；
z指数：1；
衬垫顶部：50px；/*与收割台高度相同*/
填充底部：50px；/*与.页脚高度相同*/
}
.桌子{
宽度：100%；
边界：0；
}
.表thead th{
位置：粘性；
顶部：50px；/*与收割台高度相同*/
背景：#ccc；
边界：0；
}

标题
标题
标题
标题
1.
1.
1.
1.
2.
2.
2.
2.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
最后的
最后的
最后的
最后的

请发布您尝试过的代码。谢谢。请把你试过的代码贴出来。谢谢，谢谢你的关注。我用图片更新了这个问题。请用HTML和CSS更新答案。仅使用主体