HTML简历实现打印友好页眉页脚的核心是CSS @page规则与@media print配合position: fixed布局，而非语义化标签；需用fixed定位模拟页眉页脚、预留正文边距、关闭浏览器默认页眉页脚，并避免复杂布局导致分页异常。
直接用 HTML 做带页眉页脚的「打印友好」个人简历，核心不是靠 <header></header> 和 <footer></footer> 标签——它们在浏览器里不自动出现在每一页顶部/底部；真正起作用的是 CSS 的 @page 规则 + 打印媒体查询 + 人为布局控制。
为什么 <header></header> 和 <footer></footer> 在打印时不管用
这些语义标签只是结构标记，浏览器默认不会把它们重复渲染到每张打印页上。你看到的“页眉页脚”，其实是 PDF 导出工具（如 Chrome 的“另存为 PDF”）或 CSS 手动定位模拟出来的效果。
- Chrome / Edge 打印预览中，
@page只能设置页边距、尺寸，不能插入内容（@page :first除外，但不支持content插入文本） - Firefox 对
@page的content支持更弱，基本不可靠 - 所以实际方案是：把页眉页脚做成固定位置的
<div>，用 <code>position: fixed+@media print控制显隐用
position: fixed模拟页眉页脚（最稳方案）这是目前兼容性最好、各浏览器打印输出一致的做法。关键点在于：固定定位元素在打印时会被复制到每一页，前提是它不被父容器的
overflow: hidden或transform截断。- 页眉用
top: 0，页脚用bottom: 0，并设width: 100% - 必须加
@media print { ... }块，否则屏幕浏览时也会显示重叠 - 正文内容要留出足够上下边距（比如
margin-top: 80px; margin-bottom: 60px），避免被遮挡 - 页眉页脚内文字建议用小字号（
font-size: 12px）、浅灰（color: #666），避免喧宾夺主
@media print { .resume-header { position: fixed; top: 0; left: 0; width: 100%; text-align: center; font-size: 12px; color: #666; margin: 0; padding: 8px 0; } .resume-footer { position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; font-size: 12px; color: #666; margin: 0; padding: 8px 0; } .resume-body { margin-top: 60px; margin-bottom: 60px; } }导出为 PDF 时页眉页脚被浏览器自动添加怎么办
Chrome / Edge 默认会在 PDF 顶部加网址、底部加页码和标题——这会和你自己做的页眉页脚冲突。必须手动关掉：
立即学习“前端免费学习笔记（深入）”；
- 打印预览界面 → 点击左下角「更多设置」→ 关闭「页眉和页脚」开关
- 否则你会看到两行页眉（浏览器自动生成的 + 你写的
fixed元素），后者还可能被截断 - 如果用 Puppeteer 或 wkhtmltopdf 自动化生成，对应配置项是
printBackground: true和displayHeaderFooter: false
响应式简历在打印时内容错位或分页异常
Flex/Grid 布局、
float、负 margin 在打印时容易导致内容跨页断裂或错位。这不是 bug，是打印引擎对复杂布局支持有限。- 打印专用样式里，优先用
display: block+margin控制间距，避免flex-wrap或grid-template-columns - 用
page-break-inside: avoid包裹简历模块（如「教育背景」「工作经历」），防止某一段被硬生生切到两页 - 慎用
background-image—— 大部分浏览器默认不打印背景，需手动开启「背景图形」选项，但用户往往不知道
真正难的不是写出来，而是让不同人用不同浏览器、不同 PDF 设置打印出来都保持一致。多试 Chrome 打印预览 + 「另存为 PDF」，再用 Acrobat 打开看实际效果，比任何理论都管用。
- 页眉用
