I have a multipage document in html. The document is formatted as below:
page-break-after: always;
height: 100%;
min-height: 100%;
}
footer {
clear: both;
position: absolute;
bottom: 0;
margin-top: auto;
width: 100%;
}
<div class="page">
<header>My header....</header>
<div>My Content</div>
<footer>Page 1 of 2</footer>
</div>
<div class="page">
<header>My header....</header> <div>My Content</div> <footer>Page 2 of 2</footer></div>This should print 2 pages with header and footer (footer different for each page).
But the footers appear only one, overlapped in the last page.
What is the best way to have multiple pages with headers and footers different for each page?