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

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

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

Конечно, он будет перекрываться, если вам нужен стационарный нижний колонтитул с контентом, который может быть длиннее самой страницы. Попробуйте найти в Интернете пример того, как должен выглядеть конечный продукт, и добавьте этот снимок экрана к исходному вопросу.

klewis 03.09.2018 18:06

@klewis да, но разве нет способа установить поле для каждой страницы, а затем поместить нижний колонтитул и верхний колонтитул в это поле?

mpnowacki 03.09.2018 18:50

Да, именно так и происходит. Почему это вам не подходит?

Martin 03.09.2018 19:01

@Martin, это просто не так, я пробовал множество примеров, которые нашел в Интернете. У тебя есть рабочий?

mpnowacki 03.09.2018 19:16

Вот именно ищу и 2 дня воткнул. Любая помощь будет оценена, если вы ее уже решили.

Dexterslab 11.09.2018 03:34
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
5
388
0

Другие вопросы по теме