打印 html 文档时所有页面中的 HTML 页眉和页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18786653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Header and footer in all pages while printing html document
提问by Bennet Sam
I've created a html page with a header,some content and a footer. I tried to get a print of the HTML page, and there was 2 pages. I got the header in first page and the footer in the last page.
我创建了一个带有页眉、一些内容和页脚的 html 页面。我试图打印 HTML 页面，结果有 2 页。我在第一页得到了页眉，在最后一页得到了页脚。
What i really need is the header and footer to show in all the pages like in a word document.
我真正需要的是在所有页面中显示的页眉和页脚，就像在 Word 文档中一样。
I checked and found that using the table format with the thead and tfoot,it can be done. It worked in firefox and IE, but it's not working in chrome. Is this some webkit browser compatibility problem??
我查了一下，用thead和tfoot的table格式，是可以做到的。它适用于 Firefox 和 IE，但不适用于 chrome。这是一些webkit浏览器兼容性问题吗？？
Is there any other way which is compatible with all browsers.
有没有其他兼容所有浏览器的方式。
回答by Ryan
You can target print styles specifically with the "@print" css media style definition. This will allow you to create individual styles strictly for when the document is being printed, and in print preview.
您可以使用“@print”css 媒体样式定义专门针对打印样式。这将允许您在打印文档时和在打印预览中创建单独的样式。
I would start with this as a solid base.
我会以此作为一个坚实的基础。
@media print {
* {
color: #000 !important;
-webkit-text-shadow: none !important;
text-shadow: none !important;
font-family: "Times New Roman", Times, serif;
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: none!important;
font-weight: normal!Important;
}
header, nav, footer {
overflow:visible;
}
.body {
width: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none !important;
}
a, a:link, a:visited {
&[href]:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
&[href^="javascript:"],
&[href^="#"] {
&:after {
content: "";
}
}
}
abbr[title]:after {
content: " (" attr(title) ")";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
回答by Ryan
Use fixed positioned elements that you activate with print media type:
使用通过打印介质类型激活的固定定位元素：
#header, #footer {
display: none;
}
@media print
{
#header, #footer {
position: fixed;
display: block;
top: 0;
}
#footer {
bottom: 0;
}
}
(Here assuming you have div elements with id headerand footer).
（这里假设您有带有 idheader和 的div 元素footer）。
回答by Elmy
I had the same problem and found simple tags to work best for me.
我遇到了同样的问题，发现简单的标签最适合我。
<table>
<thead>
<tr><td>
content that should be printed as page header
</td></tr>
</thead>
<tbody>
<tr><td>
content that will be spread over all pages consecutively
</td></tr>
</tbody>
</table>
The table will look like a simple table in the browser, but in printouts the content of the <thead>tag is repeated on each page. No CSS required.
该表格在浏览器中看起来像一个简单的表格，但在打印输出中<thead>，每个页面上都会重复标记的内容。不需要 CSS。
Tested in Firefox 32, IE 11 and even in MS Word 2010. Word does not translate the tag into "real" page headers, but repeats the content on top of each page. (You may have to switch to "Page View" to actually see the difference in Word).
在 Firefox 32、IE 11 甚至 MS Word 2010 中进行了测试。Word 不会将标签转换为“真正的”页面标题，而是在每个页面的顶部重复内容。（您可能需要切换到“页面视图”才能真正看到 Word 中的差异）。
回答by SHAKU
none of the above answers are not really the answer for the question asked. From my experience there is no single clean solution right now available. Feel like chrome is purposefully avoiding this bug. https://bugs.webkit.org/show_bug.cgi?id=17205.
以上答案都不是所问问题的真正答案。根据我的经验，目前没有单一的清洁解决方案可用。感觉 chrome 故意避免这个错误。https://bugs.webkit.org/show_bug.cgi?id=17205。
