Chrome无头模式转PDF：如何添加不重叠的每页页脚？

我太懂你这种头疼的感觉了——用Chrome无头模式转PDF时，要搞一个每页都显示、还不跟动态内容重叠的页脚，试了好几种方法都踩坑，简直让人抓狂！别担心，我来给你分享一个亲测有效的方案，顺便帮你分析下之前的问题出在哪。

要实现这个需求，核心思路是给页面专门预留页脚的空间，同时让正文内容主动避开这个区域，再配合固定定位的页脚。具体代码如下：

/* 定义页面尺寸和边距，底部边距要足够放下你的页脚 */
@page {
  size: A4 portrait;
  /* 上边1.5cm，下边3cm（预留页脚空间），左右各1.5cm，可按需调整 */
  margin: 1.5cm 1.5cm 3cm 1.5cm;
}

/* 给正文容器设置底部内边距，确保内容不会跑到页脚预留区 */
body {
  padding-bottom: 3cm; /* 数值和@page的bottom margin保持一致 */
}

/* 固定页脚到预留的底部区域 */
#footer {
  position: fixed;
  bottom: 0;
  /* 宽度适配页面内容区：总宽度减去左右边距的总和 */
  width: calc(100% - 3cm);
  /* 和页面左右边距对齐 */
  margin: 0 1.5cm;
  /* 页脚自身高度，根据你的内容调整 */
  height: 1.5cm;
  /* 可选：加个上边框区分内容和页脚 */
  border-top: 1px solid #ccc;
  text-align: center;
}

为什么这个方案能work？

• @page的bottom margin给页脚划了一块专属区域，Chrome的PDF渲染引擎会自动把正文内容限制在这个边距之上，不会挤进去。
• body的padding-bottom相当于给正文加了个“缓冲带”，哪怕内容是动态生成的，Chrome的分页器也会在内容碰到这个缓冲带时自动分页，完美避开页脚。
• 固定定位的页脚刚好卡在预留的底部区域里，每页都会自动显示，完全不会和正文重叠。

咱们来复盘下你之前试的几种方法，看看问题出在哪：

• 第一种方案：@page { margin:1.5cm; } #footer { position:fixed; bottom:0; }
  页面的底部边距只有1.5cm，固定页脚直接贴在页面最底部，而正文内容会填满整个页面（包括边距区域），自然就和页脚重叠了。

• 第二种方案：@page { margin:1.5cm 1.5cm 5cm 1.5cm; } #footer { position:fixed; bottom:-1.5cm; }
  你确实预留了足够的底部空间，但把页脚定位到了bottom:-1.5cm，这直接让页脚的一部分超出了页面边界，Chrome的PDF渲染要么裁切超出部分，要么把它移到下一页顶部，结果肯定不对。应该让页脚落在预留的边距区域里，用bottom:0就好。

• 第三种方案：使用@bottom-center { content: element(footer); }和position: running(footer);
  这是CSS Paged Media的标准语法，但遗憾的是，Chrome无头模式对这部分的支持一直不太完善（尤其是旧版本），所以才会出现定位完全无效的情况。目前来看，固定定位的方案反而更稳定可靠。

• 如果你的页脚高度有变化，记得同步调整@page的bottom margin和body的padding-bottom，确保预留空间足够。
• 要是担心页脚被意外拆分到两页，可以给#footer加上page-break-inside: avoid;，不过固定定位下一般不会出现这个问题。
• 尽量用最新版本的Chrome，旧版本可能存在一些PDF渲染的bug。

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