I am facing an issue with my certificate template. It contains dynamic content in the header, body, and footer sections. When printing a single page, everything looks fine. However, when printing multiple pages, the footer does not display at the bottom of the last page.
I have tried various CSS positioning options such as position: absolute, static, and fixed. The following code is the closest to achieving the desired outcome:
body {
min-height: 100vh;
margin: 0;
}
header {
min-height: 50px;
background: lightcyan;
}
footer {
min-height: 50px;
background: PapayaWhip;
}
body {
display: flex;
flex-direction: column;
}
article {
flex: 1;
}
.h500 {
height: 500px;
border: 1px solid #DDD;
margin: 2px;
}<!DOCTYPE html>
<html>
<body>
<header contentEditable>Header</header>
<article contentEditable>
<div class="h500">I set its height to 500px to span across two pages</div>
<div class="h500">I set its height to 500px to span across two pages</div>
<div class="h500">I set its height to 500px to span across two pages</div>
</article>
<footer contentEditable>Footer</footer>
</body>
</html>