使用打印模式css打印网页时标题和正文内容重叠答案

【问题标题】：Header and Body content overlapping while printing webpage with print mode css使用打印模式css打印网页时标题和正文内容重叠
【发布时间】：2017-11-10 00:40:11
【问题描述】：

我必须在每个页面中打印带有自定义标题的网页，下面是我的印刷媒体 CSS 代码

  @media screen {
      header.onlyprint, footer.onlyprint,.watermark{
          display: none; /* Hide from screen */
      }

  }
  @page {
    size:A4;

 }
  @media print {
    @page {
            size:auto;
            margin-top:2mm;

   }
   html{
     margin-top: 20mm;
   }
    header.onlyprint {
        position: fixed; /* Display only on print page (each) */
        top: 0; /* Because it's header */
        margin-top: 0;
    }
  }

而HTML代码是：

 <header class="onlyprint">
      <img src="images/logo.png"/>
 </header>

但问题只是在第一页，徽标打印正常，从第二页开始，徽标与正文内容重叠。HTML 的 CSS 在第二页不起作用。

【问题讨论】：

您尝试过clear:both; 以便正确分隔各个部分吗？
“html 的 css 不能从第二页工作” - 是的，但你对它所取得的成果的看法是完全错误的。只有一个 html 元素，它从第一页开始 - 这就是应用上边距的地方。您可能想为 @page 指定适当的边距。
如果我对页眉应用边距也会下降。
@Syfer 只有在有浮动时才有帮助。它没有做任何其他事情。
@samz22 你找到解决办法了吗？

标签： html css

【解决方案1】：

似乎仅使用 CSS 无法正确执行此任务。

我在这里找到了使用表格的 IE 和 Firefox 解决方法：http://www.jessicaschillinger.us/2017/blog/print-repeating-header-browser/

该链接内容的简要总结：IE 和 Firefox 将在每个打印页面上重复 <thead> 元素，而 <tbody> 将连续打印而不重复。

【讨论】：