[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:

<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 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; }
}

Note
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.

----------
ROW1    HEADER
----------
ROW2   
 Insert dynamic contents here
ROW N-1
----------
ROW N Footer

Score: 3

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

Source: stackoverflow.com

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

How to set Header , Scrollable content and Footer? in Android

Placing Footer at Bottom of Screen

Sticky footer with variable height in bootstrap

Hero footer not at bottom of page

CSS Footer Fixed Width, Bottom of screen, and centred

Running footer "element(footer)" in paged media appear only in last page

CSS footer doesn't stick to the bottom of the page

Should role="contentinfo" be always added on footer element?

jquery : detecting scroll position

How implement sticky footer in recyclerview