How to use HTML to print header and footer on every printed page of a document?

ben picture ben · Sep 1, 2009 · Viewed 476k times · Source

Is it possible to print HTML pages with custom headers and footers on each printed page?

I'd like to add the word "UNCLASSIFIED" in Red, Arial, size 16pt to the top and bottom of every printed page, regardless of the content.

To clarify, if the document was printed onto 5 pages, each page should have the custom header and footer.

Does anybody know if this is possible using HTML/CSS?

Answer

Infotekka picture Infotekka · Nov 8, 2010

If you take the element that you want to be the footer and set it to be position:fixed and bottom:0, when the page prints it will repeat that element at the bottom of each printed page. The same would work for a header element, just set top:0 instead.

For example:

<div class="divFooter">UNCLASSIFIED</div>

CSS:

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}