Html 如何制作页眉/页脚和打印内容，以便在每页重复页眉/页脚

我有一个页眉、一个页脚和一个内容。 我想做的是打印页面，使页眉和页脚显示在每页上，而内容显示在页眉和页脚之间。 但问题是内容重叠或隐藏在页眉和页脚下。 以下是我到目前为止所做的示例：

我试着利用contentDiv的利润率，将仓位改为绝对仓位或相对仓位。但一切都没有结果

帮个忙真是太好了。谢谢

.headerDiv{
宽度：100%；
背景色：卡德蓝；
高度：100px；
}
.contentDiv{}.reportFooter{
底部：0px；
宽度：100%；
背景颜色：灰色；
显示：块；
高度：100px；
}
@媒体印刷品{
海德尔迪夫先生{
位置：固定；
顶部：0px；
宽度：100%；
背景色：卡德蓝；
高度：100px；
}
.contentDiv{
z指数：100；
}
.reportFooter{
位置：固定；
底部：0px；
宽度：100%；
背景颜色：灰色；
显示：块；
高度：100px；
}
}

1测试
2试验
3试验
4试验
5试验
6试验
7试验
8试验
9测试
12试验
13试验
14试验
15测试
16试验
17试验
18测试
19测试
20测试
21测试
22测试
23测试
24测试
25测试
26测试

将其作为一个灵活的容器

*{
保证金：0；
填充：0；
边界：无；
}
校长，
.contentDiv，
.reportFooter{
宽度：100%；
}
海德尔迪夫先生{
背景色：卡德蓝；
}
.reportFooter{
背景颜色：灰色；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
校长，
.reportFooter{
flex:0100px；
}
.contentDiv{
弹性：1000 0；
最小高度：计算（100vh-200px）；
}

1测试
2试验
3试验
4试验
5试验
6试验
7试验
8试验
9测试
12试验
13试验
14试验
15测试
16试验
17试验
18测试
19测试
20测试
21测试
22测试
23测试
24测试
25测试
26测试

将其作为一个灵活的容器

*{
保证金：0；
填充：0；
边界：无；
}
校长，
.contentDiv，
.reportFooter{
宽度：100%；
}
海德尔迪夫先生{
背景色：卡德蓝；
}
.reportFooter{
背景颜色：灰色；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
校长，
.reportFooter{
flex:0100px；
}
.contentDiv{
弹性：1000 0；
最小高度：计算（100vh-200px）；
}

1测试
2试验
3试验
4试验
5试验
6试验
7试验
8试验
9测试
12试验
13试验
14试验
15测试
16试验
17试验
18测试
19测试
20测试
21测试
22测试
23测试
24测试
25测试
26测试

如果将固定位置添加到页眉，则内容将无法再看到它，并转到页眉顶部。尝试“top:100px”以使内容保持在最佳状态position@Jonasw我已经这样做了，但在接下来的几页中，它再次重叠。如果你在标题中添加一个固定的位置，内容将无法再看到它，并转到顶部。尝试“top:100px”以使内容保持在最佳状态position@Jonasw我已经这样做了，但在接下来的几页中它又重叠了。谢谢，但使用这个CSS，页脚只显示在最后一页，而不是两页。我认为这不能在CSS上完成。你可以尝试插入块与css分页符之前：总是；下一页，但这不是自动的。谢谢，但使用这个CSS，他的页脚只显示在最后一页上，而不是在两页上。我认为这不能在CSS上完成。你可以尝试插入块与css分页符之前：总是；下一页，但这不是自动的。