html - @media 打印 div : How to solve overlapping page text on header?

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

问题是第二页的内容与打印 div 标题重叠。 (即，在第二页上，页眉不会强制页面内容向下，所以我得到的是文本覆盖文本)。有什么办法可以解决这个问题吗？

Answer 1

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

然后将单独的 div 选择器添加到内容区域的规则中:

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