Верхний и нижний колонтитулы HTML хорошо повторяются на каждой напечатанной странице - ПЕРЕСМОТРЕНО - PullRequest
Новая
       8

Верхний и нижний колонтитулы HTML хорошо повторяются на каждой напечатанной странице - ПЕРЕСМОТРЕНО

0 голосов
/ 03 сентября 2018

Я знаю, что эта тема обсуждалась много раз, но мне не удалось найти удовлетворительного ответа. Моя проблема заключается в следующем: я хочу иметь хороший верхний и нижний колонтитулы (с фотографиями и т. Д.) На каждой странице при печати своей страницы. Я попытался использовать позиции running() в CSS, но они, похоже, не работают (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.

Заранее спасибо, Михал

...