Как использовать HTML для печати верхнего и нижнего колонтитула на каждой напечатанной странице документа?
Можно ли печатать HTML-страницы с пользовательскими верхними и нижними колонтитулами на каждой печатной странице? Я хотел бы добавить слово «UNCLASSIFIED» в «Red», «Arial», размером 16pt вверх и вниз каждой печатной страницы, независимо от содержимого. Чтобы уточнить, если документ был напечатан на 5 страницах, каждая страница должна иметь пользовательский верхний и нижний колонтитулы. Кто-нибудь знает, возможно ли это, используя HTML/CSS?
Это вопрос, на который я пытаюсь ответить долгое время. Похоже, что ключом к проблеме были бы css-элементы, такие как страница, верхний центр, контент, позиция: работа (..). Как это могло бы выглядеть, если бы браузеры полностью поддерживали @page: techrepublic.com/blog/webmaster/… alistapart.com/articles/boom alistapart.com/articles/building-books-with-css3 Некоторые открытые проблемы: code.google.com / p / chromium / Issues / Detail ? bugs.webkit.org/show_bug.cgi?id=15548
Я отправил Chrome-совместимое решение здесь , что добавит бегущий заголовок к документам , которые не содержат чрезмерно большие пространства текста. Тем не менее, пока нет решения для нижних колонтитулов.
13 ответов
Если вы возьмете элемент, который хотите быть нижним колонтитулом, и установите его как положение: фиксированное и нижнее: 0, когда страница печатает, он повторит этот элемент в нижней части каждой печатной страницы. То же самое можно было бы использовать для элемента заголовка, вместо этого просто установите top: 0.
@media screen < div.divFooter < display: none; >> @media print < div.divFooter < position: fixed; bottom: 0; >> Кажется, не работает, если у вас есть элемент, который занимает две страницы (предварительно в моем случае) — нижний колонтитул будет перезаписан на нем.
Да, к сожалению, это правда, так как вы используете фиксированное позиционирование элемента нижнего колонтитула, он будет перекрывать любые элементы, которые работают под ним. Возможно, вам удастся немного изменить настройки полей и попытаться расположить нижний колонтитул за пределами поля области содержимого, в котором находится ваш пред.
@ Тайсон, это повторяется для меня в простом тесте. Какова ваша среда? Вы уверены, что объявляете тип документа?
Я сделал заголовок, и он повторился. но это пересекается с содержанием из-за фиксированной позиции. Я могу настроить только содержимое первой страницы, но следующие по-прежнему перекрываются. Любое решение?
Это не сработало для меня, я использую Chrome 15.0. Все, что он делает — это печатает элемент там, где он будет на экране, например, в середине страницы, если это то, где я прокручивал. Это конечно не печатает на каждой странице.
У меня это тоже не сработало. Я получил ту же идею, но она не работала ни в одном браузере, который я пробовал: /
Все комментируют, что это не работает, как насчет предоставления версии браузера или какой-то дополнительной информации о том, что вы сделали?
@Skelly, не могли бы вы упомянуть, что среда не работает, у меня тоже есть firefox 43.0.1 и chrome 47
Повторение заголовков таблиц на печатных страницах было исправлено в Chrome 5 июня 2016 года. У меня версия 51.0.2704.103 в Mac OS X, и она работает.
@Infotekka На странице, над которой я работал, не было DOCTYPE, и добавление, которое (с «position: fixed» и «top: 0») дало мне желаемое поведение. Теперь мне просто нужно выяснить, как сделать так, чтобы он не перекрывал другие элементы на странице.
Верхний и нижний колонтитулы не отображаются на каждой странице. Я хочу это на каждой странице. любое решение?
это сработало для меня, но проблема в том, что если за ним есть текст, он будет наложен вместо того, чтобы толкать текст вниз
Я верю, что правильный ответ заключается в том, что HTML 5 и CSS3 не поддерживают печать верхних и нижних колонтитулов страниц в формате print .
И хотя вы можете имитировать его с помощью:
у каждого из них есть ошибки, которые мешают им быть идеальным общим решением.
Не верь другим ответам. Они могут работать для особых случаев, но в целом просто ужасно сломаются. Надежного решения не существует, пока в основных браузерах не будут реализованы поля @page. Смотрите: en.wikipedia.org/wiki/…
К сожалению, я должен поддержать это. Несмотря на то, что у нас 2018 год . почему, @footer они не дают нам @footer с content:»stuff» или тому подобное.
Я просто потратил лучшую половину своего дня на разработку решения, которое действительно сработало для меня, и подумал, что я поделюсь тем, что сделал. Проблема с вышеприведенными решениями заключалась в том, что все элементы моего абзаца будут перекрываться с нижним колонтитулом, который я хотел бы в нижней части страницы. Чтобы обойти это, я использовал следующий CSS:
footer < font-size: 9px; color: #f00; text-align: center; >@page < size: A4; margin: 11mm 17mm 17mm 17mm; >@media print < footer < position: fixed; bottom: 0; >.content-block, p < page-break-inside: avoid; >html, body < width: 210mm; height: 297mm; >> Для меня было важно page-break-inside для p и content-block . Каждый раз, когда у меня есть p , следующий за h* , я обертываю их как в div > , чтобы убедиться, что они остаются вместе и не ломаются.
Я надеюсь, что кто-то найдет это полезным, потому что мне понадобилось около 3 часов (я тоже новичок в CSS/HTML, так что это. )
ИЗМЕНИТЬ
В запросе в комментариях я добавляю пример HTML-документа. Вы захотите скопировать это в файл HTML, откройте его и затем распечатайте страницу. Предварительный просмотр печати должен показать эту работу. Он работал в Firefox и IE на моем конце, но Chrome сделал шрифт достаточно малым, чтобы он помещался на одну страницу, поэтому он там не работал.
footer < font-size: 9px; color: #f00; text-align: center; >@page < size: A4; margin: 11mm 17mm 17mm 17mm; >@media print < footer < position: fixed; bottom: 0; >.content-block, p < page-break-inside: avoid; >html, body < width: 210mm; height: 297mm; >> Example Document
This is an example document that shows how to have a footer that repeats at the bottom of every page, but also isn't covered up by paragraph text.
Example Section I
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex. Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa. Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit. Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, consectetur pulvinar orci pulvinar. Donec aliquet imperdiet ex, et tincidunt risus convallis eget. Etiam eu fermentum lectus, molestie eleifend nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum et pellentesque dignissim. Sed vehicula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex. Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit. Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero.
Example Section II
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex. Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.