I would like to print a multi-page html document, I would like to know if there is a way to repeat the header and the footer, on every printed page.
I tried "position:fixed", not working when printing on safari, also the footer is overlapping text in chrome.
I also tried table thead and tfoot, not compatible with safari and the footer on the last page is not printed at the bottom of the page on chrome.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Printing test</title>
</head>
<style>
body {
width: 21.7cm;
margin: 0;
}
header,
footer {
position: fixed;
left: 0;
right: 0;
width: 21.7cm;
}
main {
margin-top: 4.5cm;
margin-bottom: 2.5cm;
}
header {
top: 0;
height: 4.5cm;
}
footer {
bottom: 0;
height: 2.5cm;
}
</style>
<body>
<header>
<img src="header.png" style="width: 100%;">
</header>
<main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus doloremque sunt, dignissimos voluptatem
veritatis, sed fuga reprehenderit nisi, in rerum ut accusamus quos iure quibusdam et? Saepe rerum sequi
veritatis.<br><br></p>
<p>Magni omnis numquam ipsam saepe? Id fugiat sint corrupti ab provident cum unde iusto excepturi recusandae,
officia amet cumque eaque pariatur esse alias doloribus repellendus blanditiis! Consequatur recusandae
blanditiis est.<br><br></p>
<p>Illum quod accusantium, reprehenderit nam minima odio iste. In libero et, magnam placeat quasi cumque
repellendus delectus neque ab eos inventore, odio quidem similique dolorem voluptatibus dolore consectetur
reiciendis totam?<br><br></p>
<p>Illo nesciunt dolorum optio quisquam facilis debitis saepe modi, officia odio itaque rem quos. Reprehenderit
soluta aliquam quis doloribus nemo reiciendis, quam hic commodi error blanditiis assumenda sapiente, nobis
explicabo.<br><br></p>
<p>Magnam facilis illum, fugiat enim molestiae sit minima velit unde fugit ipsa vel autem consequuntur pariatur
at labore architecto aliquam soluta distinctio cum! Qui enim eveniet amet optio quia voluptate.<br><br></p>
<p>Repellendus quisquam nesciunt natus blanditiis dolorum ad voluptates fugiat vitae rerum, modi ipsa repellat
tempore distinctio itaque velit aliquam consequuntur temporibus ut optio fugit adipisci? Quae, quod
reiciendis. Harum, minus?<br><br></p>
<p>Corrupti excepturi quisquam cum aperiam distinctio velit commodi aliquam reiciendis cumque neque incidunt
consequatur, sapiente ad recusandae sequi ullam odit quasi et nostrum eos, consectetur debitis ut
repudiandae numquam. Exercitationem.<br><br></p>
<p>Asperiores molestiae, ea ducimus sint libero illo consequuntur reprehenderit excepturi eligendi maiores
facere architecto ipsa voluptatem ut eius et quo sed! Est inventore ipsam dolorem unde laudantium obcaecati
assumenda aut.<br><br></p>
<p>Dolores iure reiciendis iusto sunt odit? Animi odit provident obcaecati corporis? Dolores itaque labore
repellat maiores cum eos praesentium dignissimos odit alias fugit quas tenetur, ipsa vel impedit tempora
architecto?<br><br></p>
<p>Accusamus nam placeat, ipsam perspiciatis reprehenderit corporis exercitationem dolore quae repellendus
laboriosam vero possimus officia quisquam! Voluptate voluptatem dolorum saepe aspernatur, error sequi
commodi corrupti earum eaque animi voluptatibus sed!<br><br></p>
<p>Laboriosam deserunt dolore possimus placeat ratione quaerat, adipisci, facere odio asperiores, odit impedit
architecto optio molestias fuga nostrum? Illo optio provident quam? Voluptatum placeat dignissimos harum
ratione impedit rerum labore?<br><br></p>
<p>Quisquam a, ab cumque dolores sapiente, modi atque magni eos, deleniti at voluptas fuga non incidunt
perspiciatis rerum tempore beatae! Expedita consequuntur ratione, nihil quaerat blanditiis ad harum ducimus
nisi.<br><br></p>
<p>Culpa cum possimus odit fuga dicta animi, incidunt harum beatae aperiam! Aut, nisi totam deserunt quia a
doloribus, exercitationem modi repudiandae officiis impedit repellat, eveniet iusto dolore sit! Amet,
enim.<br><br></p>
<p>Dignissimos odit modi, eligendi hic, obcaecati recusandae quidem cupiditate nemo quibusdam eaque sint dolore
nisi commodi quia blanditiis nostrum vitae repellendus aliquam? Culpa in, consequatur soluta laboriosam
labore ea saepe.<br><br></p>
<p>Facere, odio vel. Aspernatur, fuga quia inventore quisquam, alias accusantium quidem illum ad, voluptatum
dicta cupiditate esse ipsam eveniet harum ex unde. Aliquam distinctio officia nesciunt maiores excepturi
debitis assumenda.<br><br></p>
<p>Autem reiciendis incidunt quos eos sed necessitatibus vel, fugit aut quibusdam quisquam, sapiente corrupti
aliquid. Adipisci nobis repellat ut animi nostrum aperiam. Voluptas aliquam recusandae, debitis dolorem non
quibusdam praesentium?<br><br></p>
<p>Labore ex amet eveniet perspiciatis impedit. Error eum fugit minima id, esse vero ipsum. Quibusdam nobis,
quis pariatur quasi autem sunt facere veritatis totam voluptate voluptas, eius enim. Adipisci,
accusamus!<br><br></p>
<p>Praesentium laudantium quae rem laborum libero quam? Voluptatum adipisci commodi dignissimos ullam vero modi
esse atque laboriosam. Rerum aliquid possimus accusantium magni maiores vitae ad corrupti earum fuga,
dolores ab!<br><br></p>
<p>Nam blanditiis optio neque deserunt vel repellendus praesentium, molestias iusto pariatur aspernatur ipsam,
itaque sunt, beatae culpa dolores? Delectus consequatur ratione sapiente at quaerat! Ut, rem veniam. Veniam,
accusantium atque?<br><br></p>
<p>Optio fugiat eaque dignissimos omnis voluptatem perferendis, commodi tempore beatae rerum sapiente voluptatum
quas necessitatibus asperiores quibusdam recusandae pariatur dolor nam hic temporibus, deleniti
exercitationem maiores et! Reprehenderit, minima temporibus.<br><br></p>
</main>
<footer>
<img src="footer.png" style="width: 100%;">
</footer>
</body>
</html>
