0

I need to add a logo and title on the top and bottom of every page while printing.

The contents of the page is dynamic and the span/div could extend to multiple pages. The position for page break cannot be determined as the contents are in a single div or span.

I have tried adding header and footer div and tags. But the header and footer is only displayed once at the start of first page and end of the last page respectively. Is there any way to print on every page ?

Rashid
  • 91
  • 1
  • 3
  • 9
  • You can make header in a div and make it position:fixed. and further, layout should be same. You need to set few css elements for setting header as fixed. – Naveed Ramzan Aug 08 '16 at 06:13
  • 1
    This is a duplicate question: http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document-w?rq=1 – Madalina Taina Aug 08 '16 at 06:19

2 Answers2

0

HTML

<div class="header">HEADER GOES HERE</div>
<div class="content">content content content</div>
<div class="footer">FOOTER GOES HERE</div>

CSS

@media print{
  .header{
    position: fixed;
    top: 0;
  }
  .footer{
    position: fixed;
    bottom: 0;
  }
}

@media screen{
  .header{
    display:none;
  }
  .footer{
    display:none;
  }
}

You'll need to play around with the margins so that your header and footer doesn't overlap your content though

derp
  • 2,300
  • 13
  • 20
  • This doesnt work if the contents of the main div extends to 2 or more pages(like a big paragraph). In this case, the footer is displayed only in the last page and header only on first page and not in the pages between. I need the header and footer in every page for any number of pages. – Rashid Aug 08 '16 at 07:22
  • amended typo from screen to print for the first selector. It'll show up on every page in the print preview – derp Aug 08 '16 at 11:57
  • If you scroll down to the end of page and then try to print, the position of the header and footer is moved in print preview. – Rashid Aug 09 '16 at 09:24
0

Try using position: fixed; it should work for that.

S.M Talha
  • 59
  • 1
  • 10