When creating a footer for printing, I am utilizing the following CSS:
@media all {
.page-break { display: none; }
.footer {display: none; }
}
@media print {
.page-break { display: block; page-break-before: always; }
.footer {display: block; position: fixed; bottom: 0; text-align: center; width:100%;}
}
Within the HTML, the structure resembles something like this:
<body>
...
...
<div class='footer'>Page Number: 1</div>
<div class='page-break'></div>
...
...
<div class='footer'>Page Number: 2</div>
<div class='page-break'></div>
...
</body>
An issue arises in the printed view where the footers for page 1 and page 2 overlap. This is due to the CSS property "position: fixed; bottom 0". To resolve this, my question is how can I ensure that the footers for page 1 and page 2 appear at the bottom of their respective pages in print view without overlapping?
Thank you.