css pdf page - header overlapping with content - html

Question

As we can see from the image my content overlaps with the header image and this is the code I have:
<style type="text/css" media="print">
#page {
/*size:landscape;*/
#top-center {
content: element(header);
}
#bottom-left {
content: element(footer);
}
}
div.header {
padding: 10px;
position: running(header);
}
div.footer {
display: block;
padding: 5px;
position: running(footer);
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
</style>
</head>
<div class="header">
<img src="logo.png" title="logo" width="200px"/>
</div>
<div class="content">
</div>
P.S.: Please don't close this question as duplicate as I have already searched all the questions related to the same but mine looks different as PDF is involved.

Answer 1

Headers and footers are established within the page margins.
So the solution is to increase the page top margin, for example:
#page {
margin-top: 50mm;
}

Answer 2

Method to implement header footer properly in PDF
After finding a lot on internet on different solutions and workaround, I'm finally sharing a way that works for me.
Please add these style to report container (the div in which report is rendered).
<div #scrollingContainer class="col-xxs-9 content-container" style="overflow-x: hidden;width:100%;">
</div>
// Div properties may differ
Wrap the Doc component into the table structure with thead and tfoot according to the size of your header and footer(table is wrapped inside a div).
<div style="width: 100%;">
<table style="table-layout: fixed; width: 100%;"> // Add this css to make main table fixed, child tables will still scroll
<thead class="page-break-before">
<tr>
<td>
<div style="height: 80px;"></div> // space for the respective header
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div> Your Data Goes Here........</div>
</td>
</tr>
</tbody>
<tfoot class="show-in-print page-break-after">
<tr>
<td>
<div style="height: 130px;"></div> // space for the respective footer
</td>
</tr>
</tfoot>
</table>
</div>
Sample Header and footer
<div class="page-break-before">
<div>A long header content...</div>
</div>
<div class=" page-break-after">
<p> A long footer content...</p>
</div>