I would like to insert a header on every page of the pdf generated with chrome, with a dynamic content. That's mean the header change for each pdf, i cannot set a fixed height for all the pdf to generate.

I did a lot of research and this is what i have found :

• use :

@page {
    @top-center {
        content: element(header)
    }

#header {
    position: running(header);
}

and try to apply margin into @top-center. It doesn't work because chrome doesn't support page-margin boxes. Link.

• use thead / tbody, which is the most promoted solution :

<table>
   <thead>header</thead>
   <tbody>content</tbody>
</table>

And this working well, the content is not overlapping, you don't need to add weird margin... until the header reach around 256px. After that the header is not repeated on the next pages. It only appear on the first page.

Unfortunately, this is a chromium bug and it will not be fixed soon... link

• use :

#header {
   position: fixed;
   top: 0;
}

Unfortunately, it overlaps with the content and you cannot add margin anywhere. If you add margin to the @page into css, it will add a margin for the whole page and the header with still overlap with the content. If you add margin to the content (not the header), it will work for the first page but the header and the content will still overlap on the other pages.

Any ideas ?