Wednesday, December 28, 2016

Print header and footer on every printed page of a document HTML CSS

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">Printed By Sharif</div>
CSS:
@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}

Total Pageviews