使用flex css的3窗格布局，即使在页面滚动时标题也始终位于顶部

我正在尝试为我的网页设置一个3窗格布局。 即使在页面滚动上，标题也会始终位于顶部，并具有固定的高度

页脚将有一个固定的高度，并将停留在底部，但不会固定到查看端口的底部，每当页面滚动，我的意思是，如果中心区域内容超过高度，页脚可以向下移动，而不会粘到查看端口的底部

中间的内容区域将在窗口调整大小时自动进行调整，以便完全占用剩余的所有空间

如果使用flex-CSS，效果会更好；如果其他方法不错，效果会更好。 我自己也用flex试过，但如果中心区域的内容高度不同，那么在调整窗口大小时，整个布局的行为会很奇怪。请参阅附件中的图片了解大致情况

如果你回答这个问题，请提供一些工作小提琴

页眉=已知高度和粘性
内容=可变高度
页脚=已知高度和底部（如果内容的增长大于内容的增长）

使用CSS

calc

html，正文{高度：100%；边距：0；}
标题{
位置：固定；
z指数：10；
排名：0；
高度：50px；
宽度：100%；
背景：hsl（0,80%，70%）；
}
主要{
位置：相对位置；
衬垫顶部：50px；/*收割台高度*/
最小高度：计算（100vh-80px）；/*100vh-页眉-页脚*/
背景：hsl（150,80,70%）；
}
页脚{
位置：相对位置；
高度：30px；
背景：hsl（200,80,70%）；
}

这是报头50px
主内容计算px（后面将添加长内容和页脚）
页脚30px

谢谢，我明天会在我的应用程序中检查它，然后告诉你。不知道你们会不会否决每一个问题。@FaisalMushtaq:）不客气！附言：如果第一个提出问题的人在解决他们自己的问题时表现出最好的代码尝试，那么答案是否定的；）并创建一个。快乐编码！