@Media Print重复页眉重叠问题：多页HTML打印固定页眉异常求助

嘿，我来帮你搞定这个打印页眉的问题！你现在的核心问题是同时混用了position:fixed和position:running(header)，这俩属性在打印规则里是冲突的，再加上@page没设置足够的边距，直接导致页眉和正文挤在一起重叠了。

下面是调整后的完整解决方案：

1. 修正CSS代码 #

.sampleDiv { height: 150px; }

/* 定义打印页面的边距，给页眉留出足够空间 */
@page {
  margin-top: 80px; /* 根据你的页眉实际高度调整这个值，比页眉高10-20px更稳妥 */
  @top-left {
    content: element(header);
  }
}

@media print {
  /* 只保留打印专用的running属性，删掉fixed */
  .header {
    position: running(header);
    display: block;
    width: 100%;
    /* 可选：给页眉加个分隔线，和正文区分开 */
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
  }

  /* 重置打印时的body边距，避免和@page的设置冲突 */
  body {
    margin-top: 0;
  }
}

2. HTML结构保持不变 #

<div class="header"> Some header<br> etc etc etc etc </div>
content<br> content<br> content<br> content<br> content<br> content<br> content<br>
<div class="sampleDiv">sample</div>
content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br>
<div class="sampleDiv">sample</div>
content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br>
<div class="sampleDiv">sample</div>
content<br> content<br> content<br> content<br> content<br> content<br> content<br>

关键说明 #

• 删掉position:fixed：position:running(header)是CSS分页媒体专门为打印页眉/页脚设计的属性，而fixed在打印时会强制元素重复显示，但不会和页面边距联动，很容易造成重叠。
• 调整@page margin-top：这个值必须大于等于你的页眉实际高度，给页眉留出独立的显示区域，从根源上避免和正文重叠。
• 正文边距适配：打印时重置body的默认边距，确保正文内容老老实实待在@page定义的边距范围内。

你可以根据自己页眉的实际高度微调@page的margin-top值，比如页眉高度是60px，就设为70px，留一点缓冲空间，这样每页的页眉就会清晰显示，再也不会和正文挤在一起啦！

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