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

Question

我有一个 Web 应用程序，它的报告可能超过一页，我想在每一页中打印页眉和页脚。我找到并尝试了这个： 在每个页面中重复一个报告标题， 但它对我不起作用。我尝试了opera，IE9，Firefox，Google Chrome，但......没有。page-margin 工作正常，但内容是我想要的它不起作用。

Answer 1

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

例如

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

Answer 2

我非常感谢您的回复，但我之前使用过此解决方案（位置：固定），页面内容将被标题掩盖。所以我必须使用“@page”，它只能与“Margin”属性一起使用，而“Content”不起作用，或者换句话说，我无法达到我想要的结果。

Answer 3

目前 webkit 引擎 ( https://bugs.webkit.org/show_bug.cgi?id=100075 ) 中存在一个错误，导致页脚完全错位。

Answer 4

我找到了一个对我有用的解决方案，并且只有一个没有问题的解决方案。

在 html 中

<table>
        <thead><tr><td>
            <div class="header-space">&nbsp;</div>
        </td></tr></thead>
        <tbody><tr><td>
            <div id="pageHost" class="content"></div>
        </td></tr></tbody>
        <tfoot><tr><td>
            <div class="footer-space">&nbsp;</div>
        </td></tr></tfoot>
    </table>
    <header id="pageHeader">
    </header>
    <footer id="pageFooter">
        Custom Footer
        <div class="numberOfPages">

        </div>
    </footer>

在 CSS 中

            header, .header-space,
            footer, .footer-space {
                height: 100px;
                font-weight: bold;
                width: 100%;
                padding: 10pt;
                margin: 10pt 0;
            }

            header {
                position: fixed;
                top: 0;
                border-bottom: 1px solid black;
            }

            footer {
                position: fixed;
                bottom: 0;
                border-top: 1px solid black;
            }