HTML打印转PDF时如何消除首尾空白页？（CSS列、页眉页脚场景）

• .page类上设置了page-break-after: always，该属性会强制在每个.page元素后插入分页符，哪怕当前页还有剩余空间，直接导致文档末尾多出一页空白。当内容超过1页时，这个分页符刚好落在内容结束的位置，不会产生额外空白，所以表现正常。
• 这是Firefox浏览器的兼容问题：在CSS多列布局（column-fill: auto）和固定页眉页脚的组合场景下，当内容刚好填满1-2列、不满整页可用高度时，浏览器会错误判定内容高度超出当前页容量，提前触发分页，导致首页留白，内容错位到第二页。两个问题叠加就出现了总共有3页的异常表现。

修改两处CSS规则即可解决，修改后不会影响内容超过1页时的正常表现：

1. 调整分页规则，仅给非最后一个.page元素添加尾部分页符，避免最后一页后多插空白页
2. 给.page元素明确设置可用高度，匹配扣除页眉页脚后的页面剩余空间，修复Firefox的高度计算错误

修改后的CSS代码如下：

/* 替换原有.page规则 */
.page {
  columns: 3;
  column-fill: auto;
  /* 明确多列容器高度 = 视口高度 - 页眉100px - 页脚50px */
  height: calc(100vh - 150px);
}
/* 仅非最后一页添加强制分页 */
.page:not(:last-child) {
  page-break-after: always;
}

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