Я знаю, что эта тема обсуждалась много раз, но мне не удалось найти удовлетворительного ответа. Моя проблема: мне нужен красивый верхний и нижний колонтитулы (с изображениями и т. д.) На каждой странице, когда я печатаю свою страницу. Я пробовал использовать позиции 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 да, но разве нет способа установить поле для каждой страницы, а затем поместить нижний колонтитул и верхний колонтитул в это поле?
Да, именно так и происходит. Почему это вам не подходит?
@Martin, это просто не так, я пробовал множество примеров, которые нашел в Интернете. У тебя есть рабочий?
Вот именно ищу и 2 дня воткнул. Любая помощь будет оценена, если вы ее уже решили.
Конечно, он будет перекрываться, если вам нужен стационарный нижний колонтитул с контентом, который может быть длиннее самой страницы. Попробуйте найти в Интернете пример того, как должен выглядеть конечный продукт, и добавьте этот снимок экрана к исходному вопросу.