497 css printing header footer stylesheet
是否可以在每个打印页面上打印带有自定义页眉和页脚的HTML页面？
无论内容如何,我都想在每个打印页面的顶部和底部添加Red,Arial,16pt大小的单词"UNCLASSIFIED" .
为了澄清,如果文档打印在5页上,则每个页面都应具有自定义页眉和页脚.
有人知道这是否可以使用HTML/CSS？
Inf*_*kka 344
如果您将要成为页脚的元素设置为position:fixed和bottom:0,当页面打印时,它将在每个打印页面的底部重复该元素.对于头元素也是如此,只需设置top:0.
例如:
<div class="divFooter">UNCLASSIFIED</div>
CSS:
@media screen {
div.divFooter {
display: none;
}
}
@media print {
div.divFooter {
position: fixed;
bottom: 0;
}
}
Ian*_*oyd 120
我相信正确答案是HTML 5和CSS3不支持在print媒体中打印页面页眉和页脚.
虽然你可以用以下方法模拟它:
他们每个人都有虫子,阻止他们成为理想的一般解决方案.
bri*_*enb 58
我只是花了一半时间来提出一个实际上对我有用的解决方案,并且认为我会分享我的所作所为.上面的解决方案的问题是我的所有段落元素都会与页面底部我想要的页脚重叠.为了解决这个问题,我使用了以下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 class = "content-block">以确保他们在一起,不要打破.
我希望有人觉得这很有用,因为我花了大约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;
}
}<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>
Example Document
</h1>
<div>
<p>
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.
</p>
</div>
<div>
<h3>
Example Section I
</h3>
<p>
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.
</p>
</div>
<div class="content-block">
<h3>Example Section II</h3>
<p>
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.
</p>
</div>
<footer>
This is the text that goes at the bottom of every page.
</footer>
</body>
</html>Chr*_*ini 20
Muhammad Musavi 的评论是最好的答案，所以在这里它作为一个实际的答案浮出水面：
thead/tfoot在每页的顶部和底部自动重复。但是，tfoot 不会粘在最后一页的底部。
position: fixed in print 将在每一页上重复，并且页脚将粘在所有页面的底部，包括最后一页 - 但是，它不会为其内容创造空间。
组合它们：
HTML：
<header>(repeated header)</header>
<table class=paging><thead><tr><td> </td></tr></thead><tbody><tr><td>
(content goes here)
</td></tr></tbody><tfoot><tr><td> </td></tr></tfoot></table>
<footer>(repeated footer)</footer>
CSS：
@page {
size: letter;
margin: .5in;
}
@media print {
table.paging thead td, table.paging tfoot td {
height: .5in;
}
}
header, footer {
width: 100%; height: .5in;
}
header {
position: absolute;
top: 0;
}
@media print {
header, footer {
position: fixed;
}
footer {
bottom: 0;
}
}
您可以在此处添加很多细节，但我有意将其削减到最低限度，以获得清晰呈现的页眉和页脚，在屏幕上以及每个打印页面的顶部和底部出现一次。
https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a
小智 16
我一直在寻找解决方案多年,并发现这篇文章关于如何打印在多个页面上工作而没有重叠页面内容的页脚.
我的要求是IE8,到目前为止我发现这在Chrome中不起作用.[ 更新 ]自2018年3月1日起,它也适用于Chrome
此示例通过设置css样式来使用表和tfoot元素:
tfoot {display: table-footer-group;}
Pau*_*tte 13
使用分页符来定义CSS中的样式:
@media all
{
#page-one, .footer, .page-break { display:none; }
}
@media print
{
#page-one, .footer, .page-break
{
display: block;
color:red;
font-family:Arial;
font-size: 16px;
text-transform: uppercase;
}
.page-break
{
page-break-before:always;
}
}
然后在适当的位置添加文档中的标记:
<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
参考
Bla*_*ger 11
从这个问题 - 将以下样式添加到仅打印样式表.此解决方案适用于IE和Firefox,但不适用于Chrome(从版本21开始):
#header {
display: table-header-group;
}
#main {
display: table-row-group;
}
#footer {
display: table-footer-group;
}
Bis*_*mad 10
神奇的解决方案是将所有东西放在单表中.
thead:这是重复的标题.
tfoot:重复的页脚.
tbody:内容.
并制作一个tr,td并将每个东西放在div中
代码 ::
<table class="report-container">
<thead class="report-header">
<tr>
<th class="report-header-cell">
<div class="header-info">
...
</div>
</th>
</tr>
</thead>
<tfoot class="report-footer">
<tr>
<td class="report-footer-cell">
<div class="footer-info">
...
</div>
</td>
</tr>
</tfoot>
<tbody class="report-content">
<tr>
<td class="report-content-cell">
<div class="main">
...
</div>
</td>
</tr>
</tbody>
</table>
table.report-container {
page-break-after:always;
}
thead.report-header {
display:table-header-group;
}
tfoot.report-footer {
display:table-footer-group;
}
<div class="main">
<div class="article">
...
</div>
<div class="article">
...
</div>
<div class="article">
...
</div>
...
...
...
</div>
这导致溢出,使事情与页面中断内的标题重叠..
所以>>使用:page-break-inside: avoid !important;用这个类article.
table.report-container div.article {
page-break-inside: avoid;
}
很简单,希望这会给你最好的结果.
最好的祝福.;)
来源 ..
我尝试结合tfoot和css规则来对抗这个徒劳的战斗,但它只适用于Firefox :(.当使用普通的CSS时,内容流过页脚.当使用tfoot时,最后一页上的页脚不能很好地保留在底部这是因为表格页脚用于表格,而不是物理页面.在Chrome 16,Opera 11,Firefox 3和6以及IE6上测试.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Header & Footer test</title>
<style>
@media screen {
div#footer_wrapper {
display: none;
}
}
@media print {
tfoot { visibility: hidden; }
div#footer_wrapper {
margin: 0px 2px 0px 7px;
position: fixed;
bottom: 0;
}
div#footer_content {
font-weight: bold;
}
}
</style>
</head>
<body>
<div id="footer_wrapper">
<div id="footer_content">
Total 4923
</div>
</div>
<TABLE CELLPADDING=6>
<THEAD>
<TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR>
</THEAD>
<TBODY>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR>
</TBODY>
<TFOOT id="table_footer">
<TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH> <TH>4923</TH> </TR>
</TFOOT>
</TABLE>
</body>
</html>
JYe*_*ton -1
这是您只想打印的内容吗？您可以将其添加到网站上的每个页面，并使用 CSS 将标签定义为仅限打印的媒体。
例如，这可能是一个示例标头：
<span class="printspan">UNCLASSIFIED</span>
在你的CSS中，做这样的事情：
<style type="text/css" media="screen">
.printspan
{
display: none;
}
</style>
<style type="text/css" media="print">
.printspan
{
display: inline;
font-family: Arial, sans-serif;
font-size: 16 pt;
color: red;
}
</style>
最后，要在每个页面上包含页眉/页脚，您可以使用服务器端包含，或者如果您有任何使用 PHP 或 ASP 生成的页面，您可以简单地将其编码到通用文件中。
编辑：
这个答案旨在提供一种在文档的物理打印版本上显示某些内容而不以其他方式显示内容的方法。然而，正如评论所暗示的那样，它并不能解决内容溢出时在多个打印页面上显示页脚的问题。
我把它留在这里以防它有帮助。
| 归档时间： |
|
| 查看次数： |
406047 次 |
| 最近记录： |