I have this html file, that I’m using to generate a pdf with a header and footer on every page, but after the first header, the main content overlaps with the footer and the header. How do i solve this?
<html>
<head>
<style>
@page {
size: A4;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Apply the header to every page */
#header {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #111111;
font-size: 16px;
text-align: left;
position: relative;
top: 0;
left: 0;
right: 0;
height: 40mm; /* Adjust the height of the header */
break-after: always;
}
/* Apply the footer to every page */
#footer {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #111111;
font-size: 16px;
text-align: left;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 40mm; /* Adjust the height of the footer */
break-after: always;
background-color: white;
}
/* Create a wrapper for the main content to offset for header and footer */
#main-content-wrapper {
flex: 1;
padding-bottom: 40mm; /* Add the height of the footer */
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="header">${headerWithData}</div>
<div id="main-content-wrapper">
<div id="main-content">${template}</div>
</div>
<div id="footer">${footerWithData}</div>
</body>
</html>
I tried adding page breaks to the footer but it didn’t work.
2
Answers
Try above code, seems to works for me.
The key is to make both header and footer position: fixed, see How to use HTML to print header and footer on every printed page of a document? for details.
Try playing with the margin on the