This is my html
<body>
<div>
<span>Information:</span><br><span>aaaaa</span>
<div id="printhead">
<p>
This is the print page header
</p>
</div>
</div>
<div id="docbody" >
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
<p>aaaaaaaaaa</p>
</div>
<div class="footer">
<p class="left">this is a footer Page </p>
<p class="right"></p>
</div>
</body>
css
/* not working*/
@page {
margin-bottom: 40px;
counter-increment: page;
content: "Page " counter(page) " of " counter(pages);
@bottom-right {
border-top: 1px solid #000000;
padding-right: 20px;
font-size: 12px !important;
}
@bottom-left {
content: "Footer content goes here.";
border-top: 1px solid #000000;
}
}
div#printhead {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2em;
text-align: center;
padding-bottom: 1em;
border-bottom: 1px solid;
margin-bottom: 10px;
}
div#printhead {
display: block;
clear: both;
text-align: center;
}
div#docbody {
margin-top: 3em;
overflow: visible !important;
overflow-wrap: break-word;
page-break-after: auto;
height: 50px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.footer {
width: 100%;
display: flex;
margin-top: auto;
justify-content: space-between;
bottom: 0px;
font-size: 12px;
position: fixed;
}
.left {
width: 15%;
}
.footer:after
{
counter-increment: page;
content: counter(page);
font-size: 12px;
}
I tried to add a header, footer and number of page while printing the html. The header will overlap content on next page, same for footer. And also, i have some information need placed top left of the header but it only show on first page. For the number of page, it is not working. It always show page 1 for every printed pages.
The format look like this http://www.basoftware.com.my/wp-content/uploads/2016/01/yearly-purchase-1.png
Any solution to fix this problem? Thanks in advance.