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.)
Page 1 and 2 with body margin on left; Page 1 and 2 with @page margin on right:
The body margin is only applied on the first page (left). The @page margin also moves the header element (right).
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)
For future searchers: This answer does work:
Set margin/padding for each page to print (html/css)?
It uses table < thead > to free up space on each print page.