[英]Print footer on every printed page from website, across all browsers (Chrome)
亲爱的，我尝试了CSS位置：固定属性，但它在Firefox和IE上运行正常（黑客入侵IE6），但它根本不适用于Chrome。 我认为最新的Chrome会很容易支持它，但事实并非如此。 我试过<thead>，<tfoot> <tbody>再次在IE和Firefox中工作，但在Chrome中有问题。 请任何人有一个替代解决方案。
Chrome [webkit]似乎有不同的处理位置的方式：在打印样式表中修复，而不是其他浏览器。
所以目前这个问题的答案是：
在Chrome中没有适当的解决方案。
虽然FF和IE在每个页面上呈现它，但Opera根本不显示它，而webkit浏览器只在第一页上显示它。
小测试文件：
<!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>
可在此处找到更多资源：
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://www.andypemberton.com/sandbox/watermark/
HTH。 亲切的问候，健康。
编辑：显然错误已经修复，因此我在下面分享的库可能不再有用了。
从我的所有研究来看，没有办法获得position: fixed是正确的position: fixed在Chrome中工作。 以下是Chromium项目页面上的错误链接。
与此同时，我创建了这个开源项目，允许您在Chrome中打印页眉和页脚 。 它处于开发的早期阶段，但它的工作原理取决于HTML布局的结构：
这是一项正在进行的工作，它在很大程度上依赖于CSS Regions Polyfill 。 但是我正在使用这个库中的技术对工作中的项目产生很好的影响。
我使用表完成了，但仅限于chrome中的标题。 我将重复内容放在thead标记和tbody中的页面内容中，因此浏览器解释正确。
但是，我遇到了大内容HTML的错误。 在某些情况下，内容与标题重叠。 在我发布此日期的日期，仍未找到解决方案。
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
这是我使用的代码。 注意我将html和body height都设置为100％。
@media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#footer {
position: absolute;
bottom: 0;
}
}
如何使用 HTML 在文档的每个打印页上打印 header 和页脚？
[英]How to use HTML to print header and footer on every printed page of a document?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.