HTML滚动布局

我试图设计一个带有固定页眉和页脚以及可滚动中间部分的HTML屏幕布局。我试图在CSS中使用

overflow:hidden

和

overflow:auto

为布局的中心可滚动部分获取一个滚动条，但没有成功。守则如下：

html，
身体{
身高：100%；
宽度：100%；
保证金：0；
边距块开始：0；
边距块结束：0；
背景剪辑：填充框；
字体系列：Arial、Helvetica、无衬线字体；
}
* {
文本呈现：优化易读性；
框大小：边框框；
}
文章{
溢出y：自动；
}
#场地{
宽度：100%；
身高：100%；
保证金：0；
溢出y：隐藏；
}
#hdr{
字体大小：粗体；
文本对齐：居中；
垫底：1毫米；
填料顶部：.5rem；
颜色：紫罗兰色；
}
#文件{
高度：自动；
颜色：rgb（0,0,26）；
保证金：0；
顶部：自动；
}

标题应该是固定的，并且包含文档标题，
用Javascript放在这里













文章应该在需要时滚动。
手动向下滚动以查看更多内容。













此处显示更多文本
页脚应该是固定的，并且将包含
版权/出版信息

试着给

文章一个特定的高度，而不是一个百分比。例如：

文章{
溢出y：自动；
宽度：100vh；
}
您也可以使用

#hdr {
    position: fixed;
}
footer {
    position: fixed;
    bottom: 0;
}

还是我误读了这个问题？
这可以通过flexbox布局来完成


html，
身体{
身高：100%；
宽度：100%；
保证金：0；
}
* {
文本呈现：优化易读性；
框大小：边框框；
}
#场地{
保证金：0；
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
#标题{
字体大小：粗体；
文本对齐：居中；
垫底：1毫米；
填料顶部：.5rem；
颜色：紫罗兰色；
}
#文件{
弹性：1；
溢出：自动；
背景：浅蓝色；
}
#页脚{
字体大小：粗体；
文本对齐：居中；
垫底：1毫米；
填料顶部：.5rem；
颜色：紫罗兰色；
}

标题应该是固定的，并且包含文档标题，
用Javascript放在这里













文章应该在需要时滚动。
手动向下滚动以查看更多内容。













此处显示更多文本
页脚应该是固定的，并且将包含
版权/出版信息
我尝试了
位置：已修复
但未成功。我删除它是因为这里有一个关于tackoverflow的建议。使用固定高度的问题在于，此代码必须在智能手机和台式机上运行，因此我希望避免硬编码尺寸。设置固定高度没有任何区别。