header and footer in each page in print mode with css
Solution 1
You can set a position: fixed;
header and footers so that it will repeat on each page
For Example
<header class="onlyprint"><!--Content Goes Here--></header>
<footer class="onlyprint"><!--Content Goes Here--></footer>
@media screen {
header.onlyprint, footer.onlyprint{
display: none; /* Hide from screen */
}
}
@media print {
header.onlyprint {
position: fixed; /* Display only on print page (each) */
top: 0; /* Because it's header */
}
footer.onlyprint {
position: fixed;
bottom: 0; /* Because it's footer */
}
}
Solution 2
I really appreciate your reply but i have used this solution(position : fixed) before and the content of the page would be masked by the header. so i have to use "@page" which only works with "Margin" property and "Content" does not work or in other words i cannot reach the result i want.
Solution 3
There is currently a bug in the webkit engine (https://bugs.webkit.org/show_bug.cgi?id=100075) that results in totaly misplaced footers.
Solution 4
I found a solution that worked for me and only one that works without problem.
In html
<table>
<thead><tr><td>
<div class="header-space"> </div>
</td></tr></thead>
<tbody><tr><td>
<div id="pageHost" class="content"></div>
</td></tr></tbody>
<tfoot><tr><td>
<div class="footer-space"> </div>
</td></tr></tfoot>
</table>
<header id="pageHeader">
</header>
<footer id="pageFooter">
Custom Footer
<div class="numberOfPages">
</div>
</footer>
in css
header, .header-space,
footer, .footer-space {
height: 100px;
font-weight: bold;
width: 100%;
padding: 10pt;
margin: 10pt 0;
}
header {
position: fixed;
top: 0;
border-bottom: 1px solid black;
}
footer {
position: fixed;
bottom: 0;
border-top: 1px solid black;
}
Related videos on Youtube
Masoumeh Karvar
Updated on December 20, 2020Comments
-
Masoumeh Karvar over 3 years
I have a web application and it has a report that might exceed one page and I would like to print a header and footer in every page. i find and try this: Repeating a report header in each page but it didn't work for me.I try opera,IE9,Firefox,Google Chrome but ... nothing.page-margin works fine but content is what I want and it doesn't work.
-
Quentin over 7 yearsPossible duplicate of How to use HTML to print header and footer on every printed page of a document?
-
-
Mr. Alien over 11 years@PauFracés It was not supporting previously, not sure about the current status, I had used it for firefox way back so thought this might help him
-
Pau Fracés over 11 yearsI'm dealing with the same topic, but need it working on webkit. I haven't been able to do it with html+css so I am working right now in a javascirpt library for get the job done. Hence my interest
-
frequent over 8 yearsIt will work with
position:fixed
. For example, if you set the margin of @page:margin-top:2mm, damp the html page to html:margin-top:20mm and your fixed header to header:margin:0. This will put your fixed header at page margin of 2mm while the page content will adhere to html margin 20mm. No overlap, even on print out. -
Piotr Kula almost 8 yearsThis works really well. But is there a way I can say like, I dont want a header on a specific page. Like last page or a page in the middle somehow?
-
Piotr Kula almost 8 yearsthe
html
margin is a clever trick. Works swell. Do you know if I can change that per printed page though? -
Mile Mijatović about 7 yearsIs there some solution to print header logo just on first page instead of each page?
-
Charles L. over 5 yearsThis bug was fixed in 2013, and looks like it was probably released around 2014 (around version 36).
-
Mark about 5 yearsI cannot find a combination of @page margin and html margin settings that work for multiple pages for Chrome as of writing.