本文介绍在 HTML/CSS 中为每页打印内容顶部预留固定空白的可靠方案，解决 PDF 转换（如 Node.js 生成）中页眉重叠、表格截断、分页错位等问题，重点推荐语义清晰、兼容性好的 @page 和 margin-top 组合方案。
本文介绍在 html/css 中为每页打印内容顶部预留固定空白的可靠方案，解决 pdf 转换（如 node.js 生成）中页眉重叠、表格截断、分页错位等问题，重点推荐语义清晰、兼容性好的 `@page` 和 `margin-top` 组合方案。
在将 HTML 转为 PDF（如使用 Puppeteer、wkhtmltopdf 或 html-pdf 等 Node.js 工具）时，常遇到多页内容顶部挤占、页眉与正文重叠、表格跨页断裂等问题。根本原因在于：position: fixed（如 .header-section-0）在打印上下文中行为不可靠——多数 PDF 渲染引擎不支持 fixed 元素在每页重复渲染，且会脱离文档流，导致后续内容未为其预留空间。
✅ 推荐解决方案：使用 @page 规则 + 内容区域内边距
@media print {
/* 为每页设置顶部留白（即“页边距”），所有内容自动下移 */
@page {
margin-top: 60px; /* 此处值即为每页顶部空白高度 */
}
/* 确保主体内容不被裁剪，并与页眉区安全隔离 */
body {
margin-top: 60px; /* 与 @page margin-top 一致，保证首屏预览/打印预览视觉一致 */
}
/* 可选：为页眉创建真正可复用的打印头（非 fixed） */
.print-header {
position: running(header);
}
@page {
@top-center {
content: element(header);
}
}
}? 关键说明：
-
@page { margin-top: 60px }是 W3C 标准方案，被 Puppeteer（Chromium）、wkhtmltopdf、Prince 等主流 PDF 工具良好支持；它为每一页强制保留顶部空白，不影响分页逻辑。 - 配套设置
body { margin-top: 60px }可避免浏览器打印预览中首屏内容“上移错觉”，提升开发调试体验。 - 避免滥用
position: fixed+top：它在打印中通常仅渲染在第一页，且不触发分页器为它让出空间，是重叠问题的主因。
⚠️ 注意事项：
- 不要混用
page-break-before: always与position: fixed页眉——前者强制分页，后者脱离流，极易造成空白丢失或内容覆盖。 - 若需动态页眉（如页码、标题），优先使用
running()+element()机制（如上方示例），而非 CSS Grid 或 Flex 布局模拟；Grid 在@media print中兼容性较差，且无法参与分页计算。 - 测试时务必在 Chrome 打印预览（Ctrl+P）中验证，再导出 PDF —— 多数 Node.js 工具基于 Chromium，其行为与打印预览高度一致。
? 进阶提示：
若需不同页（如首页 vs 其他页）差异化留白，可用 @page :first 单独定义：
@page :first {
margin-top: 100px; /* 首页留白更大 */
}
@page {
margin-top: 60px; /* 其余页统一留白 */
}综上，放弃 fixed + grid 的 hack 方式，转向标准 @page 边距控制，是实现稳定、跨工具兼容的打印顶部留白最简洁、最可靠的实践路径。
