本文介绍一种纯 CSS 方案，通过 position: absolute 结合弹性布局与打印分页控制，确保页脚始终固定在打印输出的最后一页底部，而非每页重复出现。
本文介绍一种纯 css 方案，通过 `position: absolute` 结合弹性布局与打印分页控制，确保页脚始终固定在打印输出的最后一页底部，而非每页重复出现。
在制作证书、报告等单次打印输出的 HTML 模板时，一个常见需求是：页眉（header）位于第一页顶部，主体内容（article）可跨多页，而页脚（footer）仅出现在最后一页的底部。但默认情况下，CSS 无法直接感知“最后一页”，且 position: fixed 在打印中会重复出现在每一页，position: absolute 若未配合相对定位容器则行为不可控。
✅ 正确解法的核心思路是：
- 将
设为display: flex; flex-direction: column; position: relative;，建立绝对定位参考上下文； - 页脚设为
position: absolute; bottom: 0; left: 0; width: 100%;，使其锚定在 body 可视区域底端（即最后一页底部）； - 主体
<article></article>设置flex: 1并添加padding-bottom: 50px（等于页脚高度），为页脚预留空间，避免内容被遮挡； - 针对打印分页，使用
page-break-after: always控制分页，并对最后一项做高度微调（如height: calc(100vh - 70px)），确保页脚有足够空间自然落于末页。
以下是完整可运行示例（已适配 Chrome / Edge 打印预览）：
<!DOCTYPE html>
<html>
<head>
<style>
body {
min-height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
position: relative; /* 关键：为 footer 的 absolute 提供定位上下文 */
}
header {
min-height: 50px;
background: lightcyan;
padding: 10px;
}
article {
flex: 1;
padding-bottom: 50px; /* 等于 footer 高度，防止内容顶住页脚 */
}
footer {
min-height: 50px;
background: PapayaWhip;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
text-align: center;
font-weight: bold;
}
.h500 {
height: 90vh; /* 单项接近满屏，便于触发分页 */
border: 1px solid #DDD;
margin: 2px 0;
page-break-after: always; /* 强制每块后分页 */
}
.h500:last-child {
height: calc(100vh - 70px); /* 为 header + footer 预留空间，确保末页不溢出 */
page-break-after: auto; /* 最后一项不再强制分页 */
}
</style>
</head>
<body>
<header contenteditable>【证书抬头】—— 专业认证中心</header>
<article contenteditable>
<div class="h500">学员姓名：张三｜课程：前端高级开发｜学时：120小时</div>
<div class="h500">考核成绩：优秀｜授予日期：2024年6月15日</div>
<div class="h500">证书编号：CERT-2024-887766｜本证书全国有效</div>
</article>
<footer contenteditable>© 2024 专业认证中心｜官网：example.com</footer>
</body>
</html>⚠️ 注意事项：
-
position: absolute在打印中表现稳定，但必须确保父容器（body）具有position: relative，否则页脚可能相对于视口或根元素定位，导致偏移； -
page-break-after: always是传统分页方案，在现代浏览器中推荐辅以break-after: page（CSS Fragmentation Level 3），但兼容性略低，生产环境建议保留page-break-*前缀； - 若内容动态生成，需确保
.h500:last-child选择器能准确匹配末项；也可改用:nth-last-child(1)或 JS 动态添加类增强鲁棒性； - 打印前务必在浏览器「打印预览」中验证效果（Ctrl+P），不同浏览器对
vh和分页的解析略有差异，必要时可将90vh替换为具体像素值（如800px）提升一致性。
该方案无需 JavaScript，零依赖，语义清晰，兼顾可编辑性（contenteditable）与打印精准性，特别适合证书、结业证明、法律文书等强调格式严谨性的场景。
