Print footer on every printed page from website, across all browsers (Chrome)
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 T开发者_如何学Pythonried out <thead>,<tfoot><tbody> again works in IE and Firefox, but problematic in Chrome. Please any one have an alternate solution to it.
It seems like Chrome[webkit] has different way of handling position:fixed in print stylesheets than the rest of the browsers.
So the current answer to this question is:
There is no adequate solution for this in 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.
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/
test page:
http://www.andypemberton.com/sandbox/watermark/
HTH. Kind regards, mtness.
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: fixed to work in Chrome. Here is a link to the bug on the Chromium project page.
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:
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.
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.
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.
When printing tables in Google Chrome, content overlaps header
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 wayThis is the code i use. Note I am setting both html and body height to 100%.
@media print {
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#footer {
position: absolute;
bottom: 0;
}
}
加载中,请稍侯......
精彩评论