如何避免PDF生成时主内容与页眉页脚重叠？

你当前的问题核心是没利用好CSS Paged Media规范来处理PDF分页布局，靠普通flex布局和position:fixed没法正确适配分页后的内容偏移，加上给页眉加break-after:always反而强制分页打乱了结构。下面是两种可靠的解决思路：

方案一：使用CSS Paged Media标准（推荐） #

大部分主流PDF生成工具（如Chrome打印、wkhtmltopdf）都支持这套规范，能精准控制每页的页眉页脚区域：

<html>
<head>
  <style>
    /* 定义页面尺寸与边距，预留页眉页脚空间 */
    @page {
      size: A4;
      margin-top: 40mm;  /* 与页眉高度一致 */
      margin-bottom: 40mm; /* 与页脚高度一致 */
      margin-left: 15mm;
      margin-right: 15mm;
    }

    /* 标记页眉为可复用的页面元素 */
    #header {
      position: running(header);
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      color: #111111;
      font-size: 16px;
      text-align: left;
      height: 40mm;
    }

    /* 标记页脚为可复用的页面元素 */
    #footer {
      position: running(footer);
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      color: #111111;
      font-size: 16px;
      text-align: left;
      height: 40mm;
      background-color: white;
    }

    /* 将页眉插入到每页顶部左侧 */
    @page {
      @top-left {
        content: element(header);
      }
    }

    /* 将页脚插入到每页底部左侧 */
    @page {
      @bottom-left {
        content: element(footer);
      }
    }

    /* 主内容自适应页面边距内的空间 */
    body {
      margin: 0;
      padding: 0;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    #main-content {
      padding: 0 5mm; /* 可选：避免内容贴边 */
    }
  </style>
</head>
<body>
  <div id="header">${headerWithData}</div>
  <div id="main-content">${template}</div>
  <div id="footer">${footerWithData}</div>
</body>
</html>

关键修改说明： #

• @page边距设置：直接给页面预留出页眉页脚的高度，主内容会自动限制在边距范围内，从根源避免重叠。
• position:running：把页眉页脚标记为可复用元素，通过@top-left/@bottom-left伪元素插入到每页对应位置，这是PDF分页布局的标准用法，比fixed定位更稳定。
• 移除break-after:always：原来的这个属性会强制页眉单独占一页，完全没必要，直接删除即可。

方案二：简化版（适合对Paged Media支持有限的工具） #

如果你的PDF生成工具对position:running支持不佳，可以用固定定位+内容偏移的方式：

<html>
<head>
  <style>
    @page {
      size: A4;
    }

    /* 给body设置上下内边距，避开页眉页脚区域 */
    body {
      margin: 0;
      padding: 40mm 15mm 40mm 15mm; /* 上=页眉高，下=页脚高 */
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    #header {
      position: fixed;
      top: 0;
      left: 15mm;
      right: 15mm;
      height: 40mm;
      background-color: white; /* 避免被内容穿透 */
      font-size: 16px;
      color: #111111;
      text-align: left;
    }

    #footer {
      position: fixed;
      bottom: 0;
      left: 15mm;
      right: 15mm;
      height: 40mm;
      background-color: white;
      font-size: 16px;
      color: #111111;
      text-align: left;
    }
  </style>
</head>
<body>
  <div id="header">${headerWithData}</div>
  <div id="main-content">${template}</div>
  <div id="footer">${footerWithData}</div>
</body>
</html>

核心逻辑： #

通过给body设置与页眉页脚高度一致的上下内边距，让主内容自动避开固定定位的页眉页脚，同时给页眉页脚添加白色背景，防止被下方内容穿透。

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