使用Chrome PrintToPdf将带固定页眉页脚的HTML转PDF时内容覆盖问题求助

不用固定定位（fixed），改用CSS分页媒体规则配合内容边距就能解决内容覆盖页眉页脚的问题，同时还能适配可变字体大小，无需手动计算高度。

核心方案：用CSS @page 规则定义页眉页脚 #

放弃fixed定位，利用CSS专为打印/分页设计的@page规则控制页眉页脚，同时给主内容区设置合适的上下边距，确保内容在页眉和页脚之间的区域自动分页。

关键代码示例 #

/* 定义页面尺寸和边距：留出页眉页脚的空间 */
@page {
  size: A4;
  /* 上边距=页眉高度+内容间距，下边距=页脚高度+内容间距，用相对单位适配字体变化 */
  margin: 2.5rem 0.8rem 1.8rem 0.8rem;
}

/* 设置左右页面的页眉内容 */
@page :left {
  @top-left {
    content: "文档左侧页眉";
    font-size: 1rem;
    color: #333;
  }
}

@page :right {
  @top-right {
    content: "文档右侧页眉";
    font-size: 1rem;
    color: #333;
  }
}

/* 设置页脚，自动生成页码 */
@page {
  @bottom-center {
    content: "第 " counter(page) " 页 / 共 " counter(pages) " 页";
    font-size: 0.9rem;
    color: #666;
  }
}

/* 主内容容器：让内容在页面边距内自然流动 */
.main-content {
  font-size: 1rem;
  line-height: 1.6;
  /* 用相对单位，字体缩放时自动适配 */
}

/* 优化表格跨页体验 */
table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  display: table-header-group; /* 强制表头在每页顶部重复显示 */
}

tr {
  page-break-inside: avoid; /* 尽量避免单行被分页截断 */
}

适配可变字体大小的要点 #

• 所有涉及高度、边距的属性统一使用相对单位（em/rem），不要用固定像素值。比如页眉字体设为1rem，页面边距用rem定义，这样无论字体大小如何调整，页眉页脚高度和内容间距都会按比例自动适配，无需手动计算内容尺寸。
• 不给主内容区设置固定高度，让它在@page定义的边距范围内自然流动，浏览器打印引擎会自动处理分页逻辑。

为什么fixed定位会导致覆盖问题 #

fixed定位是相对于视口的，打印分页时每个页面都是独立视口，fixed元素会在每页重复显示，但浏览器的自动分页逻辑不会识别fixed元素的占位，内容会直接延伸到页面底部，进而覆盖页脚。而@page规则是专为分页媒体设计的，它定义的页面边距会强制内容在安全区域内分页，完美避开页眉页脚。

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