多页PDF打印时如何实现页脚仅固定在最后一页底部

纯CSS方案（推荐，无JS依赖，兼容所有现代浏览器） #

之前两个CSS写法不生效的核心原因是定位基准错了：

• 直接给页脚设position: fixed会绑定到每页的打印视口，所以会出现在每一页底部
• 直接给页脚设position: absolute但没有设置正确的定位父级，会默认绑定到首屏打印视口，所以只会出现在第一页底部

正确实现只需要调整HTML结构和CSS规则即可：

1. 先调整HTML结构，把所有打印内容包裹在同一个根容器内：

<div class="print-root">
  <!-- 所有正文内容放这里，支持任意长度自动分页 -->
  <div class="main-content">
    <!-- 正文、表格、图片等业务内容 -->
  </div>
  <!-- 需要放在最后一页底部的页脚 -->
  <div class="print-footer">页脚内容</div>
</div>

2. 编写对应打印样式：

@media print {
  /* 配置打印页面基础参数 */
  @page {
    size: A4 portrait; /* 设置纸张尺寸和方向，按需调整为A3/横向等 */
    margin: 15mm 10mm; /* 页面上下左右边距，按需调整 */
  }
  /* 根容器设为相对定位，作为页脚absolute的定位基准 */
  .print-root {
    position: relative;
    min-height: 100%;
  }
  /* 正文预留足够底部空间，避免和页脚重叠 */
  .main-content {
    padding-bottom: 25mm; /* 值大于等于页脚高度即可 */
    page-break-inside: auto;
  }
  /* 页脚定位到整个打印文档的最底部，即最后一页底部 */
  .print-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20mm; /* 固定页脚高度，和正文底部内边距对应 */
    page-break-inside: avoid; /* 禁止页脚被分页拆分 */
  }
  /* 重置默认边距，避免浏览器默认样式干扰 */
  html, body {
    margin: 0;
    padding: 0;
  }
}

JS兜底方案（适配复杂内容场景） #

如果页面内存在大量浮动、手动分页、绝对定位元素导致纯CSS方案的根容器高度计算有偏差，可以用轻量JS做高度校准，不需要复杂的分页计算：

// 打印触发前自动校准页脚位置
window.addEventListener('beforeprint', () => {
  const content = document.querySelector('.main-content');
  const footer = document.querySelector('.print-footer');
  // 先重置内联样式避免重复计算错误
  content.style.paddingBottom = '';
  // 单页可打印高度换算：96dpi下1mm≈3.78px，根据自己@page设置的尺寸、边距计算即可
  // 例：A4纵向总高297mm，减去上下边距共30mm，可打印高度为267mm≈1009px
  const singlePagePrintHeight = 1009;
  const totalContentHeight = document.querySelector('.print-root').scrollHeight;
  const lastPageRestHeight = totalContentHeight % singlePagePrintHeight;
  // 最后一页剩余高度不够放页脚时，自动补内边距把页脚顶到页面底部
  if (lastPageRestHeight < footer.offsetHeight) {
    const needAddPadding = singlePagePrintHeight - lastPageRestHeight + 8; // 留8px容错
    content.style.paddingBottom = `${needAddPadding}px`;
  }
});
// 打印结束后重置样式，不影响正常页面浏览
window.addEventListener('afterprint', () => {
  document.querySelector('.main-content').style.paddingBottom = '';
});

注意事项 #

• 测试效果以浏览器打印预览为准，屏幕视图的布局逻辑和打印渲染逻辑存在差异，不要直接以页面显示效果判断打印结果
• 建议在打印设置中关闭浏览器默认生成的页眉页脚，避免和自定义页脚位置冲突
• 如果需要手动控制分页位置，给对应元素加page-break-after: always即可，不会影响页脚定位

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