使用css在打印模式下每页的页眉和页脚 [英] header and footer in each page in print mode with css

问题描述

我有一个Web应用程序，它的报告可能超过一页，我想在每页中打印一个页眉和页脚. 我发现并尝试这样做: 在每个页面中重复报告标题 但这对我不起作用.我尝试用Opera，IE9，Firefox，Google Chrome浏览器，但是……什么都没有.

I have a web application and it has a report that might exceed one page and I would like to print a header and footer in every page. i find and try this: Repeating a report header in each page but it didn't work for me.I try opera,IE9,Firefox,Google Chrome but ... nothing.page-margin works fine but content is what I want and it doesn't work.

推荐答案

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

You can set a position: fixed; header and footers so that it will repeat on each page

例如

<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 */
    }
}

这篇关于使用css在打印模式下每页的页眉和页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！