Print header/footer on all pages (Print Mode)
If you're willing to switch over to tables for your layout (not necessarily ideal), you can do it with the <thead>
and <tfoot>
elements. They'll print at the top and bottom of every page:
<table>
<thead>
<!-- Will print at the top of every page -->
</thead>
<tbody>
<!-- Page content -->
</tbody>
<tfoot>
<!-- Will print at the bottom of every page -->
</tfoot>
</table>
Another option is to use display table-header-group
and table-footer-group
but cross-browser support isn't great:
#header {
display: table-header-group;
}
#main {
display: table-row-group;
}
#footer {
display: table-footer-group;
}
css print mode: display header and footer only on first page of a generated word doc
When comparing word generated html, I have missed one crucial mso css tag :
mso-first-header: url ...
Instead of mso-header
.
Together with that, the attribute mso-title-page
must also be set to yes
.
By combining these two you get the desired effect!
Creating page headers and footers using CSS for print
Putting an element to the top of each page:
@page {
@top-center {
content: element(pageHeader);
}
}
#pageHeader{
position: running(pageHeader);
}
See http://www.w3.org/TR/css3-gcpm/#running-elements (works in Flying Saucer)
Is there a way to get a web page header/footer printed on every page?
It can be done with tables -- and I know I'm going to risk a downvote by suggesting using tables for layout - but we are talking IE6 here which isn't known for its fantastic CSS support :-)
If you set a CSS style as follows:
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
Then when you create your HTML, render your body as:
<body>
<table>
<thead><tr><td>Your header goes here</td></tr></thead>
<tfoot><tr><td>Your footer goes here</td></tr></tfoot>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be
</td></tr>
</tbody>
</table>
</body>
Yes it's not good (tables vs CSS), it's not ideal, but (importantly for you) it does work on IE6. I can't comment on Firefox as I've not tested it there, but it should do the job. This will also handle differnt sized pages, differing font sizes, etc. so it should "just work".
If you want the header and footer to appear on printed media only, then use the @media parameters to do the right thing:
@media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
}
@media screen {
thead { display: none; }
tfoot { display: none; }
}
NoteAs of July 2015, this will still only work in Firefox and IE. Webkit-based browsers (cf. Chrome, Safari) have long standing bugs in their issue trackers about this if anyone feels strongly enough to vote on them:
The comments below this question tell me this is now resolved in Chrome. I haven't checked myself :-)
The original bugs against Chrome (for reference) are:
- https://bugs.webkit.org/show_bug.cgi?id=17205
- https://code.google.com/p/chromium/issues/detail?id=24826
- https://code.google.com/p/chromium/issues/detail?id=99124
Related Topics
Html5 Number Input - Always Show 2 Decimal Places
How to Disable Viewport Zooming on Mobile Safari
How to Remove Indentation from an Unordered List Item
How to Prevent Flex-Items from Overflowing Flex Parent With No Wrap
Line Break in HTML Select Option
Removing Margin from Flex Items When They Wrap
How to Automatically Set Text Box to Uppercase
What Are Valid Values For the Id Attribute in Html
Can't Scroll to Top of Flex Item That Is Overflowing Container
How to Auto-Resize an Image to Fit a 'Div' Container
Html Video Not Playing in Safari Browser
How to Remove All Script Tags from HTML File
Embed Pdf on a Webpage and Prevent Download
React: Action on Variable Change
First Name Validation Using HTML 5 Pattern
Wrapping Text Inside Input Type="Text" Element Html/Css
How to Vertically Center a Div Element For All Browsers Using Css