多页打印时如何避免正文文本与Footer重叠？

针对你遇到的打印时正文和Footer跨页重叠的问题，可通过以下步骤修复：

核心思路 #

利用CSS打印专属的@page规则预留页脚空间，结合fixed定位让Footer固定在每页底部，同时给正文容器添加底部内边距，避免内容侵入页脚区域。

修改后的完整CSS代码 #

/* 非打印场景的原有样式保留 */
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 120px;
}

/* 打印专用样式 */
@media print {
  @page {
    /* 底部边距设为Footer高度，预留出页脚位置 */
    margin-bottom: 120px;
    /* 可根据需求调整其他边距，比如上下左右的留白 */
    margin-top: 2cm;
    margin-left: 1cm;
    margin-right: 1cm;
  }

  body {
    position: relative;
    z-index: 0;
  }

  .content {
    /* 正文底部内边距等于Footer高度，防止内容跑到页脚区域 */
    padding-bottom: 120px;
  }

  footer {
    /* fixed定位让Footer固定在每页底部 */
    position: fixed;
    bottom: 0;
    width: calc(100% - 2cm); /* 匹配@page的左右边距，避免Footer超出打印区域 */
    height: 120px;
    z-index: 10;
    background-color: #ffffff; /* 白色背景覆盖下方正文，保证Footer内容清晰 */
  }
}

关键细节说明 #

• @page的margin-bottom：为每页底部专门预留Footer的高度空间，fixed定位的Footer会刚好落在这个区域，不会和正文重叠。
• .content的padding-bottom：确保正文内容在最后一页时，不会延伸到Footer的位置，彻底避免内容被遮挡。
• position: fixed：让Footer在所有打印页的底部都显示，而非仅第一页底部。
• width: calc(100% - 2cm)：匹配@page设置的左右边距，防止Footer超出打印页面的可打印区域。

额外测试建议 #

调整后用浏览器的打印预览功能查看效果，不同浏览器的打印渲染逻辑略有差异，可根据实际预览结果微调边距、内边距的数值。

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