CSS 在网站的每个打印页面上打印页脚，跨所有浏览器 (Chrome)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3758339/
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
Print footer on every printed page from website, across all browsers (Chrome)
提问by Sagar Kadam
Dear all, I tried CSS Position: Fixed Property but it does work properly on Firefox and IE(hack for IE6), but it's not working at all for Chrome. I thought Chrome being the latest will support it very easily but still it isn't. I Tried out <thead>,<tfoot><tbody> again works in IE and Firefox, but problematic in Chrome. Please any one have an alternate solution to it.
亲爱的，我尝试过 CSS 位置：固定属性，但它在 Firefox 和 IE 上可以正常工作（针对 IE6 的 hack），但在 Chrome 上根本不起作用。我认为 Chrome 是最新的会很容易支持它，但它仍然不是。我尝试了 <thead>,<tfoot><tbody> 再次在 IE 和 Firefox 中工作，但在 Chrome 中存在问题。请任何人有一个替代解决方案。
采纳答案by tim
This is the code i use. Note I am setting both html and body height to 100%.
这是我使用的代码。注意我将 html 和 body 高度都设置为 100%。
@media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#footer {
position: absolute;
bottom: 0;
}
}
回答by mtness
It seems like Chrome[webkit] has different way of handling position:fixed in print stylesheets than the rest of the browsers.
看起来 Chrome[webkit] 有不同的处理位置的方式：固定在打印样式表中而不是其他浏览器。
So the current answer to this question is:
There is no adequate solution for this in Chrome.
所以这个问题的当前答案是：
Chrome 中没有足够的解决方案。
Whereas FF and IE render it on Every page, Opera doesn't show it at all, and webkit browsers only show it on the first page.
而 FF 和 IE 在每个页面上呈现它，Opera 根本不显示它，而 webkit 浏览器只在第一页上显示它。
small test file:
小测试文件：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>print css test by mtness</title>
<style type="text/css">
@media print {
#watermark {
display: block;
position: fixed;
top: 0;
right: 0;
z-index: 5;
}
p {
position: relative;
top: 40pt;
display: block;
page-break-after: always;
z-index: 0;
}
}
</style>
</head>
<body>
<div id="watermark">AWESOME!</div>
<p>page1</p>
<p>page2</p>
<p>page3</p>
</body>
</html>further resources might be found here:
http://room118solutions.com/2011/03/31/styling-print-headers-and-footers-with-css/
http://css-discuss.incutio.com/wiki/Printing_Headers
http://www.andypemberton.com/css/print-watermarks-with-css/
更多资源可以在这里找到：
http: //room118solutions.com/2011/03/31/styling-print-headers-and-footers-with-css/
http://css-discuss.incutio.com/wiki/Printing_Headers
http://www.andypemberton.com/css/print-watermarks-with-css/
test page:
http://www.andypemberton.com/sandbox/watermark/
测试页面：http:
//www.andypemberton.com/sandbox/watermark/
HTH. Kind regards, mtness.
哈。亲切的问候，mtness。
回答by lastmjs
Edit: Apparently the bug has been fixed, so the library I share below may not be of much use anymore.
编辑：显然这个错误已经修复，所以我在下面分享的库可能不再有用了。
From all of my research, it is correct that there is no way to get position: fixedto work in Chrome. Here is a link to the bugon the Chromium project page.
从我所有的研究来看，没有办法position: fixed在 Chrome 中工作是正确的。这是Chromium 项目页面上错误的链接。
In the meantime, I have created this open-source project that allows you to print headers and footers in Chrome. It is early in development but it works, depending on the structure of your HTML layout:
同时，我创建了这个开源项目，允许您在 Chrome 中打印页眉和页脚。它处于开发初期，但它可以工作，具体取决于您的 HTML 布局的结构：
It is a work-in-progress, and it relies heavily on the CSS Regions Polyfill. But I am using the techniques in this library to very good effect on a project at work.
这是一项正在进行中的工作，它在很大程度上依赖于CSS Regions Polyfill。但是我正在使用这个库中的技术对工作中的项目产生很好的效果。
回答by Luiz Paulo
I accomplished that using tables, but only for headers in chrome. I placed the repeating content on thead tag and the page content in tbody, so the browser interpreted correct.
我使用表格完成了这项工作，但仅适用于 chrome 中的标题。我将重复内容放在 thead 标签上，将页面内容放在 tbody 中，因此浏览器解释正确。
However, I have encountered a bug in large contents HTML. In some cases, the content overlapped the header. In the date that I'm posting this, still not found a solution.
但是，我在大内容 HTML 中遇到了一个错误。在某些情况下，内容与标题重叠。在我发布此内容的日期，仍未找到解决方案。
When printing tables in Google Chrome, content overlaps header
回答by Mahadev
thead.report-header {
display: table-header-group;
}
tfoot.report_footer_Mh {
display:table-footer-group;
}
tabel.report-container {
page-break-after: always;
}<table class="report-container" cellpadding="4" cellspacing="0" width="790" align="center" background="" style="word-break: break-word">
<!-- place the header part here-->
<thead class="report_header_Mh">
<tr>
<th class="report_header_cell_Mh">
<div class="header_info_Mh">
</div>
</th>
</tr>
</thead>
<!-- Header Ends here-->
<!-- Place the Main Content here-->
<tbody class="report_content_Mh">
<tr>
<td class="report_content-cell_Mh">
<div class="main_Mh">
</div>
</td>
</tr>
</tbody>
<!-- Main Content ends here-->
<!--Place Footer content here-->
<tfoot class="report_footer_Mh">
<tr>
<td class="report_footer-cell_Mh">
<div class="footer_info_Mh">
</div>
</td>
</tr>
</tfoot>
<!-- Footer Ends here-->
</table>
It worked for me try this way