我有一个证书模板，它在页眉、正文和页脚中有动态内容，如果打印是单页，看起来不错，但如果打印超过一页，则页脚不会显示在最后一页的底部。
我尝试了很多东西，比如
position: absolute, static, fixedbody {
min-height: 100vh;
margin: 0;
}
header {
min-height: 50px;
background: lightcyan;
}
footer {
min-height: 50px;
background: PapayaWhip;
}
body {
display: flex;
flex-direction: column;
}
article {
flex: 1;
}
.h500 {
height: 500px;
border: 1px solid #DDD;
margin: 2px;
}<!DOCTYPE html>
<html>
<body>
<header contentEditable>Header</header>
<article contentEditable>
<div class="h500">I made its height:500px to show it in 2 pages</div>
<div class="h500">I made its height:500px to show it in 2 pages</div>
<div class="h500">I made its height:500px to show it in 2 pages</div>
</article>
<footer contentEditable>Footer</footer>
</body>
</html>请将页脚 css 更新为
position:fixed;padding-bottomarticlebody{min-height:100vh;margin:0;display:flex;flex-direction:column;position:relative;}
header{min-height:50px;background:lightcyan;}
footer{min-height:50px;background:PapayaWhip;position:fixed;bottom:0;width:100%;left:0;}
article{flex:1;padding-bottom:50px;}
.h500{height:500px;border:1px solid #DDD;margin:2px;} <!DOCTYPE html>
<html>
<head>
</head>
<body>
<header contentEditable>Header</header>
<article contentEditable>
<div class="h500">I made its height:500px to show it in 2 pages</div>
<div class="h500">I made its height:500px to show it in 2 pages</div>
<div class="h500">I made its height:500px to show it in 2 pages</div>
</article>
<footer contentEditable>Footer</footer>
</body>
</html>