Question

我知道这个话题已经讨论了很多次，但是我没有找到令人满意的答案。我的问题是：打印页面时，我希望每页都有漂亮的页眉和页脚（带有图片等）。我尝试在CSS中使用running()位置，但是它们似乎不起作用（chrome 68），即标题仅出现在第一页上。我也尝试使用position: fixed; top:0。重复了页眉和页脚，但它们与其他元素重叠。

            @media print {
                div.header {
                    position: fixed;
                    top: 0;
                }
    
                div.footer {
                    position: fixed;
                    bottom: 0;
                }
            }
    
            @media screen {
                div.header {
                    display: none;
                }
    
                div.footer {
                    display: none;
                }
            }

    <html>
    <head>
    </head>
    <body>
        <div class="header">
            Header
        </div>
        <div class="footer">
            Footer
        </div>
        <div class="content">
            <ol>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
            </ol>
            </div>
    </body>
    </html>

我尝试使用这种方式，但是margin-top中的padding-top或div.content之类的属性仅应用于第一张打印页面，而@page{margin-top:xyz}应用于标题和页脚。

有人知道解决这个问题的方法吗？

一个注意事项：我正在使用的html是由Sphinx生成的，因此实际上没有机会手动分割内容（在这种情况下为ol）并利用padding属性

预先感谢， Michał

HTML页眉和页脚在每个打印的页面上都很好地重复-已修订

0 个答案: