How to add headers and footers in HTML, CSS and JavaScript?

Question

I have a document in HTML and CSS. I would like to have headers and footers on each print page so that when I click the Print button, each page has the same footer and header. Is there a way to do this using web technology? I can not find much print information other than page break, etc.

Answer 1

Here is what I learned:

You can use position: fixed and top: 0 or bottom: 0 to place an element at the top / bottom of the page each . However, since fixed positioning does not work on IE6, the only choice for this is to use a table with 100% height and thead and tfoot . This is some kind of magic that works the way you want (so that thead and tfoot appear on every page). If you don't care that IE6 just uses fixed positioning.

However, fixed positioning also means that any content that you have can go beyond a fixed positioned element. Thus, in essence, the header and footer do not take up space.

You cannot control the actual header / footer (e.g. typed URL). The user must disable these ones.

The best alternative to painful HTML / CSS printing is PDF. You can control how each page looks, what its size and header / footer are. The disadvantages are slower prints (PDF generation is not as fast as loading an HTML page), and pain in working with any PDF library.

Answer 2

CANNOT set header and footer, this is the browser that handles this part.