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
How can I add headers and footers to every page of html content I'm printing from Mobile Safari?
There is a bug in WebKit, that makes it currently impractical in Safari. Here is the link to this issue.
https://bugs.webkit.org/show_bug.cgi?id=17205
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;
}
Related Topics
Using HTML in Jquery UI Autocomplete
Remove Default Text/Placeholder Present in HTML5 Input Element of Type=Date
How to Resize an Image to Fit in the Browser Window
Youtube: How to Present Embed Video with Sound Muted
How to Curve the Div from Bottom with Image Background
How to Display an .HTML Document , or .HTML Fragment at CSS Content
HTML Class Attribute with Spaces, It Is a W3C Valid Class
HTML Table Cell Width for Different Rows
Bootstrap Navbar. When I Press the Button Nothing Happens
Vertical (Rotated) Text in HTML Table
Bootstrap 3: Push/Pull Columns Only on Smaller Screen Sizes
Issue with CSS Media Queries(Scrollbar)
How to Get the Collection of Model State Errors in ASP.NET MVC
How to Flip Images Horizontally with HTML5
Making a Div That Covers the Entire Page
How to Change the Size of the Radio Button Using CSS