JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Header & Footer print</title>
<style type="text/css">
body {
text-align: center;
padding: 4em 1em;
}
header, footer {
position: fixed;
left: 0;
right: 0;
color: #fff;
padding: 1em;
}
header {
background: tomato;
top: 0;
}
footer {
background: cornflowerblue;
bottom: 0;
}
@media print {
body {
padding-top: 1cm;
padding-bottom: 1cm;
}
}
@page {
size: A5;
/* Adjust according to your header and footer sizes */
margin: 1cm 2cm;
padding: 5cm;
}
</style>
</head>
<body>
<div id="app">
<header>Fixed Header</header>
<!-- Doesn't matter where this is placed in the DOM, but I kept it up here for clarity atm -->
<footer>Fixed Footer</footer>
<!-- Random long content: -->
<main>
<p>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, qui iusto, expedita corporis praesentium ratione cum nihil dignissimos autem nemo aperiam placeat sint officiis non necessitatibus aliquid voluptates. Repellendus, totam.</span>
<span>Ab nostrum quidem inventore odio enim ut repellat expedita corporis nemo, distinctio dolore necessitatibus cum sint accusantium cumque, dolorem assumenda exercitationem fugiat consequuntur tempore, vero soluta provident? Itaque, reprehenderit molestias!</span>
<span>Laudantium dolor ipsum veritatis molestiae, non inventore dicta odio, quidem facilis rem vero atque quasi magnam quo iste vitae. Recusandae quos laudantium fugit aut asperiores illum autem suscipit ea ut!</span>
<span>Vero fugiat nisi saepe officiis maxime doloremque adipisci facere, possimus est alias quam optio a consequatur veniam tempore perferendis doloribus rem laboriosam sunt dicta quos ea odio?...