[ACCEPTED]-Is there a way to get a web page header/footer printed on every page?-footer

Accepted answer
Score: 34

It can be done with tables -- and I know 18 I'm going to risk a downvote by suggesting 17 using tables for layout - but we are talking 16 IE6 here which isn't known for its fantastic 15 CSS support :-)

If you set a CSS style as 14 follows:

thead { display: table-header-group; }
tfoot { display: table-footer-group; }

Then when you create your HTML, render 13 your body as:

   <thead><tr><td>Your header goes here</td></tr></thead>
   <tfoot><tr><td>Your footer goes here</td></tr></tfoot>
     Page body in here -- as long as it needs to be

Yes it's not good (tables vs 12 CSS), it's not ideal, but (importantly for 11 you) it does work on IE6. I can't comment 10 on Firefox as I've not tested it there, but 9 it should do the job. This will also handle 8 differnt sized pages, differing font sizes, etc. so 7 it should "just work".

If you want 6 the header and footer to appear on printed 5 media only, then use the @media parameters 4 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; }

As 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 3 this question tell me this is now resolved 2 in Chrome. I haven't checked myself :-)

The 1 original bugs against Chrome (for reference) are:

Score: 6

This will work in some browsers, not not 6 all. I don't think there is an elegant 5 cross-browser solution

Include the print 4 footer/header you want in divs on the page 3 (in this example div id='printableFooter')

In 2 the screen css file put:

#printableFooter {display: none;}

In the print css 1 file:

#printableFooter {display: block; position: fixed; bottom: 0;}
Score: 5

I would suggest to divide the page in table, and 6 add the header part to first row and the 5 footer part to the last row. The contents 4 of the rows between the first and last rows 3 can be changed dynamically so you will get 2 the constant header and footer at desired 1 pages.

 Insert dynamic contents here
ROW N Footer

Score: 3

try to generate a (rtf | pdf) document for 1 printing

More Related questions