如何实现打印时每页顶部显示页眉（Header）且不覆盖正文内容？

要解决页眉覆盖正文的问题，核心是让页眉占据打印页面的边距区域，正文在页面的内容区域显示，两者互不重叠。以下是两种可行的方案：

方案一：@page边距 + fixed定位（兼容性广） #

这种方式适配大多数浏览器和打印工具，步骤清晰：

1. 用@page规则设置页面顶部边距，数值等于页眉的高度，确保正文自动从边距下方开始：

@page {
  margin-top: 100px; /* 页眉高度，根据实际需求调整 */
  /* 可选：设置页脚边距 */
  margin-bottom: 2cm;
}

2. 配置页眉元素的fixed定位，让它刚好落在@page预留的顶部边距区域内：

.div_header {
  position: fixed;
  top: 0; /* 对齐打印页面的顶部（即@page的边距顶部） */
  width: 100%;
  height: 100px; /* 和@page的margin-top数值保持一致 */
  background-color: #ffffff; /* 避免页眉透明导致正文内容透显 */
  padding: 10px;
  box-sizing: border-box; /* 确保内边距不额外占用宽度 */
}

此时正文内容会自动避开@page设置的顶部边距，不会被页眉覆盖，且页眉会在每一页重复显示。

方案二：CSS Paged Media @top规则（标准打印布局） #

这是CSS打印规范中专门定义页眉页脚的方式，更贴合专业打印需求：

/* 预留页眉区域的顶部边距 */
@page {
  margin-top: 100px;
}

/* 将页眉元素关联到页面的顶部区域（这里以左右页统一显示为例） */
@page :left {
  @top-left {
    content: element(header);
  }
}

@page :right {
  @top-right {
    content: element(header);
  }
}

/* 如果不需要区分左右页，直接用居中页眉：
@page {
  @top-center {
    content: element(header);
  }
}
*/

/* 标记页眉元素为可用于打印页眉的运行元素 */
.div_header {
  position: running(header);
  width: 100%;
  height: 100px;
  background-color: #ffffff;
  padding: 10px;
  box-sizing: border-box;
}

为什么你之前的方法失效？ #

• 单独用fixed定位：没有为正文预留空间，导致页眉直接覆盖在正文上方。
• 给body加margin-top：这个margin仅作用于第一页的起始位置，后续页面的正文会从页面顶部开始，依然被页眉覆盖。
• @page嵌套body选择器：@page规则属于打印布局规则，不能嵌套普通元素选择器，语法无效。

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