打印样式问题：多页时.bodyContent与.pageHeader重叠修复咨询

问题背景 #

原有CSS在Chrome和Firefox更新后失效：第一页中.pageHeader静态表格与.bodyContent内容位置正常，但从第二页开始，.bodyContent会与固定在顶部的.pageHeader重叠。需求是让.pageHeader在所有打印页面顶部显示，.bodyContent始终位于其下方310px处。

修复方案 #

核心是通过@page规则为打印页面预留头部空间，配合固定定位实现每页重复头部，同时避免内容重叠：

@media print {
  /* 为打印页面设置上边距，刚好容纳头部高度 */
  @page {
    margin-top: 310px;
    margin-bottom: 1cm;
    margin-left: 1cm;
    margin-right: 1cm;
  }

  table.pageHeader {
    position: fixed;
    top: 0;
    width: 100%;
    height: 310px; /* 与@page的margin-top值匹配 */
  }

  .bodyContent {
    padding-top: 0; /* 移除原padding，避免第一页内容间距过大 */
  }
}

关键说明 #

• @page { margin-top: 310px }：为固定头部预留显示区域，所有页面的文档流内容会自动从该边距下方开始，彻底解决后续页面内容与头部重叠的问题。
• 固定定位的.pageHeader设置top: 0，会紧贴打印页面顶部，刚好填充@page预留的上边距空间。
• 若.pageHeader实际高度并非310px，需同步调整@page的margin-top和.pageHeader的height值，确保两者一致。

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