本文介绍一种纯 CSS 方案，通过 position: absolute 配合弹性布局与合理留白，确保动态内容证书模板的页脚始终显示在打印输出的最后一页底部，而非每页重复出现。
本文介绍一种纯 css 方案，通过 `position: absolute` 配合弹性布局与合理留白，确保动态内容证书模板的页脚始终显示在打印输出的最后一页底部，而非每页重复出现。
在制作可打印的证书模板（如结业证书、荣誉证书）时，常需满足「页眉在首页顶部、主体内容自适应高度、页脚仅出现在最后一页底部」这一排版需求。但浏览器默认的分页行为会使 position: fixed 或 position: absolute 的页脚在每一页都重复渲染，而 flex: 1 布局又无法自然约束页脚只锚定到最后一页——这是典型的打印样式兼容性挑战。
解决的关键在于分离视觉定位与分页逻辑：
- 将
<footer></footer>设置为position: absolute，并置于的bottom: 0，同时确保为position: relative，使其定位上下文可控； - 为
<article></article>（主体内容区）设置padding-bottom，值等于页脚高度（如50px），为页脚预留物理空间，防止内容被遮挡； - 调整
.h500类等分页区块的高度与分页行为：使用page-break-after: always强制分页，并对最后一块使用height: calc(100vh - 70px)动态收缩，为页脚腾出精确空间（此处70px≈ header 50px + footer 50px − 重叠补偿，需按实际调整）。
以下是完整、经过验证的实现代码：
body {
min-height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
position: relative; /* 为绝对定位 footer 提供定位上下文 */
}
header {
min-height: 50px;
background: lightcyan;
}
article {
flex: 1;
padding-bottom: 50px; /* 关键：预留 footer 高度空间 */
}
footer {
min-height: 50px;
background: PapayaWhip;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.h500 {
height: 90vh; /* 单页内容高度，留出 header/footer 空间 */
border: 1px solid #DDD;
margin: 2px;
page-break-after: always; /* 每块后强制分页 */
}
.h500:last-child {
height: calc(100vh - 70px); /* 最后一块收缩，避免多出空白页 */
}
<style>
/* 上述 CSS 插入此处 */
</style><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>
⚠️ 注意事项：
- 此方案依赖
vh单位和page-break-*属性，在 Chrome / Edge 打印预览中表现稳定；Firefox 对page-break-after支持较弱，建议测试时优先使用 Chromium 内核浏览器； - 若内容高度不可控（如用户自由编辑），建议配合 JavaScript 动态计算总高度并调整
.h500:last-child的height，或改用@media print中的break-inside: avoid进行更精细控制； - 切勿在打印样式中使用
position: fixed—— 它会导致页脚在每一页重复渲染，违背“仅最后一页显示”的核心需求。
该方法无需 JavaScript，语义清晰、维护成本低，是证书类文档打印布局的轻量级最佳实践。
