I have an html document which should be printed. But the print page should have a border for each page, also there should be a header and footer repeating on each page. Is it possible using html and css?
@media print {
header {
display: block;
color: red;
position: fixed;
top: 0px;
width: 100%;
height: 70px;
margin-bottom: 20px;
}
footer {
position: fixed;
bottom: 0;
display: block;
color: red;
width: 100%;
height: 30px;
margin-top: 20px;
}
#wrapper {
border: 1px solid #000;
padding: 30px;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
}
}
<body>
<div id="wrapper">
<header>
<p>This is a header</p>
</header>
<section class="content">
<p> Lorem </p>
</section>
<footer>
<p>This is a footer</p>
</footer>
</div>
</body>