Header/Footer on each print Page

Using HTML/CSS, I want to print a header (p.e. logo+company name) / footer (p.e. contact details) on each print page. Using this:

@media print {
      @page {
        margin-top: 3.5cm;
        margin-bottom: 3.5cm;
      }

      header {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: 2.5cm;
      }
  }

I get the header element to appear on each page. But, due to it’s fixed positioning, it overlays the normal contend behind. I do not want to overlay the content. The obvious way to have all content visible seems to add a margin to each @page, but this also moves the footer down.

(Margins from other Elements I tried appear only once, and not on each page.)

I have tried several tutorials, answers (and comments) but they don’t work (in current Firefox). Also most questions seem to be from 2012.

How do I create a header / footer on each page, without overlapping normal text? (Ideally it should render in FlyingSaucer/OpenPDF)

You need to sign in to view this answers

Related Post