@media print div：如何解决页眉重叠的页面文本？答案

【问题标题】：@media print div: How to solve overlapping page text on header?@media print div：如何解决页眉重叠的页面文本？
【发布时间】：2019-11-27 06:52:03
【问题描述】：

在 Firefox 中打印页面中的屏幕时，我使用 @media 在每个页面上打印标题。我的 css 设置如下：

@media print {
    div.printDivHeader {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.0em;
    position: fixed;
    display: block;
    width: 100%;
    height: auto;
    top: 0;
    }
}

问题是第二页的内容与打印的 div 标题重叠。（即，在第二页上，标题不会强制页面内容向下，因此我得到的文本覆盖了文本）。有什么办法可以处理吗？

【问题讨论】：

我们需要第二页的 html 和 css，谢谢
顺便说一下，我不确定您是否知道，但当前版本的 Firefox 具有打印预览功能。没有这个，一个人将不得不打印到 pdf 或打印到纸上......这两个都是繁琐的选择。

标签： html css

【解决方案1】：

将此添加到您的 Header 媒体规则：bottom:3em; 修改 3em 以适应内容。

然后为你的内容区域添加一个单独的 div 选择器：

div.printDivContent {
    position: relative;
    width: 100%;
    top:3em;   //match size of header
    left:0px;
    right:0px;
}

【讨论】：

【解决方案2】：

设置为“克隆”时，CSS 键“box-decoration-break”会有所帮助。见：CSS Fragmentation

您可以围绕您的内容创建一个容器类，并在页眉和页脚的大小中设置顶部和底部边距，然后在此容器上将 box-decoration-break 设置为“克隆”。

#content {
    box-decoration-break: clone;
    margin-bottom: 90px;
 }

【讨论】：

【解决方案3】：

带有position: fixed; 的东西从不推送静态（或相对）内容。要么有样式来确保它们不重叠......要么它们重叠。
请参阅this example JSFiddle，它使用您的 css。

问题出在其他地方。
标题如何不与第一页中的文本重叠？你有什么东西把文字往下推吗？保证金最高？什么？

是否可以分享原始示例或简化示例？（您可以使用JSFiddle。）

【讨论】：

问题是如果我不使用位置：固定标题不会出现在每个页面上
（您的意思是将此评论发布到@Augus 的回答中吗？）是的，我明白了。从我的角度来看，问题是：有些东西正在推动第一页的内容，而不是其他页面的内容；那东西不是标题；因此，对标头没有任何更改会有所帮助，我们应该看看还有什么效果。
在第一页有一个 H2 元素，顶部有足够的填充，不会发生重叠。另外，当我这样做时：@media print { div.printDivHeader { font-family: Arial, Helvetica, sans-serif;字体大小：1.0em；位置：固定；显示：块；宽度：100%；高度：自动；顶部：0； } @page { 边距：1cm;上边距：5cm； } } /* 所有边距设置为 2cm */ ... 它适用于第一页（如预期的边距）但不适用于后续页面。
所以它永远不会在其他页面上工作，因为没有 H2 元素 - 当然。它可能在您设置时使用 margin-top 工作......除了，根据 w3.org/TR/css3-page/#allowed-pg-brk ， When a page break occurs here, the computed values of the relevant 'margin-top' and 'margin-bottom' properties are set to '0'. 填充也是如此。我很茫然，这里没有解决方案。
@MTR 对此有什么解决办法吗？我和你在同一条船上

【解决方案4】：

嗯，我认为你应该使用

position:relative

而不是

position:fixed

【讨论】：

【解决方案5】：

我知道这是一个老问题，但对于那些在打印时无法找到可靠方法在所有页面顶部打印标题的人（不重叠内容）。我通过在打印时将页面包装在表格中并将我的标题放在表格的标题中来解决这个问题。这不是最优雅的解决方案，但有效（至少在 Chrome 中）。

<table>
   <thead>
      <tr>
         <th>
             <!-- Elements you want to appear in the header -->
         </th>
      </tr>
   </thead>
   <tbody>
       <tr>
          <td>
             <!-- Content that may span multiple pages... -->
          </td>
       </tr>
   </tbody>
</table>

【讨论】：