如何使用CSS实现打印时每页显示页眉和页脚？附示例代码
2026-5-14
实现CSS打印时每页显示页眉和页脚
要让网页在打印时每页都自动展示页眉和页脚，我常用CSS固定定位结合表格布局的方案，亲测能完美解决内容被页眉页脚遮挡的问题，下面是完整的可实现代码：
完整代码示例
HTML结构
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>打印测试页面</title> <style> /* 嵌入下方CSS样式 */ </style> </head> <body> <table> <thead> <tr> <td> <div class="header"> Lorem Ipsum是印刷和排版行业的标准占位文本。自15世纪起，当一位不知名的印刷工将活字版打乱制作样本册后，它便成为行业通用的占位文本，历经五个世纪乃至电子排版时代仍基本保持不变，在20世纪60年代随Letraset模板普及，近年又随Aldus PageMaker等桌面出版软件广泛应用。 </div> </td> </tr> </thead> <tbody> <tr> <td> 内容1 内容2 内容3 内容4 内容5 内容6 内容7 内容8 内容9 内容10 内容11 内容12 内容13 内容14 内容15 内容16 内容17 内容18 内容19 内容20 内容21 内容22 内容23 内容24 内容25 内容26 内容27 内容28 内容29 内容30 内容31 内容32 内容33 内容34 内容35 内容36 内容37 内容38 内容39 内容40 内容41 内容42 内容43 内容44 内容45 内容46 内容47 内容48 内容49 内容50 内容-最后 </td> </tr> </tbody> <tfoot> <tr> <td> <div class="footer"> Lorem Ipsum是印刷和排版行业的标准占位文本。自15世纪起，当一位不知名的印刷工将活字版打乱制作样本册后，它便成为行业通用的占位文本，历经五个世纪乃至电子排版时代仍基本保持不变，在20世纪60年代随Letraset模板普及，近年又随Aldus PageMaker等桌面出版软件广泛应用。 </div> </td> </tr> </tfoot> </table> </body> </html>
CSS样式
html, body { margin: 0; padding: 0; height: 100%; } table { height: 100%; width: 100%; border-collapse: collapse; } table td { vertical-align: top; } /* 页眉固定在每页顶部 */ .header { position: fixed; height: 80px; background: #f0f0f0; top: 0; width: 100%; padding: 10px; box-sizing: border-box; } /* 页脚固定在每页底部 */ .footer { position: fixed; height: 100px; background: red; bottom: 0; width: 100%; padding: 10px; box-sizing: border-box; } /* 内容区预留上下空间，避免被页眉页脚遮挡 */ tbody td { padding-top: 80px; padding-bottom: 100px; }
核心逻辑说明
- 固定定位生效：页眉用
position: fixed; top: 0，页脚用position: fixed; bottom: 0，这会让它们在打印的每一页都固定在顶部和底部位置。 - 内容防遮挡：给tbody的单元格设置和页眉、页脚高度一致的上下内边距，确保正文内容始终在页眉页脚之间的区域显示。
- 表格布局适配：用表格包裹整个页面，利用表格的高度自适应特性，让内容区域自动填充页眉页脚间的剩余空间，避免内容出现不合理的分页断裂。
直接复制代码测试，按下Ctrl+P就能看到打印预览效果，每页都会清晰显示页眉和页脚~
内容的提问来源于stack exchange，提问作者Akash Designer
