Question

在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;
    }
}

问题是第二页的内容与print div标题重叠。（即，在第二页上，标题不会强制页面内容下降，因此我将文本写入文本）。有办法解决这个问题吗？

Answer 1

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

然后为您的内容区域的规则添加单独的div选择器：

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

Answer 2

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

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

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

Answer 3

position: fixed;的内容从不推送静态（或相对）内容。要么有造型以确保它们不重叠......或者它们重叠请参阅使用您的CSS的this example JSFiddle。

问题出在其他地方标题如何与第一页中的文本不重叠？你有什么东西推动文字？边距？什么？

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

Answer 4

嗯，我认为你应该使用

position:relative

而不是

position:fixed

Answer 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>

@media print div：如何解决标题上的重叠页面文本？

5 个答案: