使用CSS @media print 和表格的 thead/tfoot 实现页眉页脚自动分页时，若错误使用 position: fixed，会导致浏览器在最后强制插入一个空白页；正确做法是将页脚内容严格置于 内并配合 display: table-footer-group，禁用固定定位。

使用css `@media print` 和表格的 `thead`/`tfoot` 实现页眉页脚自动分页时，若错误使用 `position: fixed`，会导致浏览器在最后强制插入一个空白页；正确做法是将页脚内容严格置于 `

` 内并配合 `display: table-footer-group`，禁用固定定位。

在生成可分页打印的 HTML 发票（或报表）时，常需确保每页顶部显示统一标题（页眉）、底部显示公司信息或合计栏（页脚），而中间内容随数据量自然分页。许多开发者尝试用 position: fixed + @media print 模拟页脚，但该方式在打印预览中极易引发额外空白页问题——尤其当内容未填满整页时，浏览器会为“固定定位元素”预留空间，最终在文档末尾生成一个空页。

根本原因在于：position: fixed 元素脱离文档流，在分页上下文中无法被正确锚定到每一页的物理底部；它仅渲染一次（通常在第一页），而浏览器为兼容性可能额外分配一页用于容纳该元素的“潜在位置”，从而产生冗余页。

✅ 正确解法：完全依赖原生表格分页机制
HTML 表格的 和

在打印媒体中支持 display: table-header-group / display: table-footer-group，这是 CSS 打印规范原生支持的、跨浏览器稳定的页眉页脚重复方案：

• → 每页顶部重复
• → 每页底部重复
• 必须移除所有 position: fixed、top/bottom 偏移及独立
  结构
• 页脚内容应直接嵌套在 的 内，而非置于 底部

  以下是关键修复代码片段（精简版）：

  

  Article To Html

  文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

  下载

  @media print {
    /* ✅ 启用原生页脚分页 */
    tfoot.report-footer {
      display: table-footer-group;
    }
    td.report-footer-cell {
      height: 8rem; /* 预留足够底部空间，避免内容挤压 */
    }
  
    /* ❌ 必须删除以下危险样式 */
    /*
    #footer {
      position: fixed;
      bottom: 15px;  ← 删除！
      width: 97%;    ← 删除！
    }
    */
  }

  <!-- ✅ 正确结构：页脚内容严格位于 <tfoot> 内 -->
  <tfoot class="report-footer"><tr>
  <td class="report-footer-cell">
        <div class="footer-info">
          <!-- 这里放置完整的页脚区域（金额大写、签名栏等） -->
          <section id="itemsfooter"><div id="amountinwords">
              <ol>
  <li><small>Total Amount in Words (INR)</small></li>
                <li><b>seventy ONLY</b></li>
              </ol>
  </div>
            <div id="totalamount">
              <ol>
  <li><small>Total Amount</small></li>
                <li><b>₹70.00</b></li>
              </ol>
  </div>
          </section><section id="invoiceinformation"><div id="signature">
              for Book Publications<br><br><br>Authorized Signatory
            </div>
          </section>
  </div>
      </td>
    </tr></tfoot>

  ? 注意事项与最佳实践：

  • 禁止混合使用 fixed 与 table-footer-group：二者逻辑冲突，是多余页的主因。
  • 控制页脚高度：通过 td.report-footer-cell { height: Xrem } 显式设定最小高度，防止页脚内容过短导致分页计算异常。
  • 避免 page-break-after: always 在末尾表格上：示例中 table.report-container { page-break-after: always } 若应用于最后一个表格，会强制追加一页——请仅对多表分页场景使用，单张发票应移除。
  • 测试不同浏览器：Chrome 和 Edge 对 table-footer-group 支持最稳定；Firefox 需确保 紧跟 后声明；Safari 建议升级至最新版。
  • 内容分页优化：为防止行项目被切断，可对明细行容器添加 page-break-inside: avoid（如 #itemscontent > div）。

  通过回归标准表格分页语义，不仅能彻底消除多余空白页，还能提升打印一致性与可维护性。记住：打印样式应优先利用浏览器原生能力，而非强行用定位“模拟”——简洁即可靠。