css-paged-media - 使用CSS在打印模式下每页的页眉和页脚

Question

我有一个Web应用程序，它的报告可能会超过一页，我想在每页中打印一个页眉和页脚。
我发现并尝试这样做:
Repeating a report header in each page
但是它对我不起作用。我尝试用Opera，IE9，Firefox，Google Chrome浏览器，但是……什么也没有。页面边距效果很好，但是内容是我想要的，但它不起作用。

Answer 1

您可以设置position: fixed; header 和页脚，以便在每个页面上重复

例如

<header class="onlyprint"><!--Content Goes Here--></header>
<footer class="onlyprint"><!--Content Goes Here--></footer>

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

@media print {
    header.onlyprint {
        position: fixed; /* Display only on print page (each) */
        top: 0; /* Because it's header */
    }
    footer.onlyprint {
        position: fixed;
        bottom: 0; /* Because it's footer */
    }
}