如何用HTML/CSS实现每页打印页眉页脚且不遮挡正文？

核心思路：@page边距预留 + 固定定位页眉页脚 #

通过给打印页面定义专属边距，把页眉页脚放在预留的边距区域内，既避免遮挡正文，又能实现每页重复显示，同时兼容目标渲染引擎。

1. 定义打印页面边距 #

用@page属性给页眉、页脚划出固定的专属区域，正文会自动填充中间的安全范围：

@page {
  size: A4;
  margin: 70px 20px 60px; /* 上70px给页眉，下60px给页脚，左右各20px */
}

注意：FlyingSaucer要求@page必须明确size属性，否则边距设置可能失效。

2. 页眉页脚的样式配置 #

放弃可能遮挡正文的普通布局，改用position: fixed配合边距对应的偏移，同时添加防拆分规则：

@media print {
  /* 隐藏仅在屏幕显示的页眉页脚 */
  .screen-header, .screen-footer {
    display: none;
  }

  /* 打印专用页眉 */
  .print-header {
    position: fixed;
    top: 0;
    left: 20px;
    right: 20px;
    height: 70px; /* 和@page的上边距数值一致 */
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    page-break-inside: avoid; /* 防止页眉被分页拆分 */
  }

  /* 打印专用页脚 */
  .print-footer {
    position: fixed;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 60px; /* 和@page的下边距数值一致 */
    border-top: 1px solid #ccc;
    padding: 10px 0;
    text-align: center;
    page-break-inside: avoid; /* 防止页脚被分页拆分 */
  }

  /* 正文容器无需额外上边距，@page已预留足够空间 */
  .content {
    page-break-after: auto; /* 允许正文自动分页 */
  }
}

3. HTML结构示例 #

<!-- 仅屏幕显示的页眉页脚（可选） -->
<header class="screen-header">...</header>
<footer class="screen-footer">...</footer>

<!-- 打印专用页眉 -->
<header class="print-header">
  <img src="logo.png" alt="公司Logo" style="height: 50px;">
  <span>XX有限公司</span>
</header>

<!-- 打印专用页脚 -->
<footer class="print-footer">
  <p>联系电话：123-45678900 | 地址：XX市XX区XX路XX号</p>
</footer>

<!-- 正文内容区域 -->
<div class="content">
  <!-- 你的正文内容，会自动分页显示在页眉页脚之间 -->
</div>

4. FlyingSaucer/OpenPDF专属适配 #

• 如需添加页码，用CSS计数器更可靠，FlyingSaucer完全支持：

@page {
  margin-bottom: 80px; /* 给页码额外预留空间 */
  @bottom-center {
    content: "第 " counter(page) " 页，共 " counter(pages) " 页";
    font-size: 12px;
  }
}

• 确保所有CSS规则都放在<style>标签内，FlyingSaucer对外部CSS文件的支持有限。

5. Firefox浏览器兼容调整 #

• 若出现页眉页脚与正文重叠，检查@page边距值是否和页眉页脚的height完全匹配，确保正文渲染区域严格在边距内部。
• 不要给正文容器设置padding-top或margin-top，完全由@page控制正文起始位置。

内容的提问来源于stack exchange，提问作者TobiasGriese