I'm creating a printable webpage using HTML, JS and CSS. Each page must have a header and a footer with the branding of the company. But when I want to view the print preview, I've got this. The text is overflowing the footer and headers on the page break.
See image below:
Below is my code I've for now:
@media print {
@page {
size: A4;
margin: 1.3cm 2.5cm 0.75cm 2.5cm;
}
* {
margin: 0;
padding: 0;
}
.print-footer {
position: fixed;
display: block;
bottom: 0;
left: 0;
width: 100%;
z-index: -1;
}
.print-body {
margin: 30px 0 30px 0;
}
.print-header {
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
z-index: -1;
}
}<div class="visible-print">
<div class="print-header">
<img src="https://via.placeholder.com/300x60?text=Logo">
</div>
<div class="print-body">
<button onclick="window.print()">Print</button>
<div id="print-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie sem tempus mauris mollis aliquet. Sed efficitur sem id ligula rhoncus congue et in massa. Sed in urna metus. Duis ultrices ligula risus, vitae vehicula diam pretium non. Ut
vitae nunc lacinia, scelerisque quam vitae, aliquam lacus. Sed dictum ultricies ornare. Fusce consequat est ac vulputate pulvinar. Donec sed nisi odio. Cras imperdiet ullamcorper pulvinar. Vivamus leo nulla, malesuada id bibendum vitae, ultricies
quis tellus. Quisque congue pulvinar lobortis. Praesent sit amet nibh tristique, dictum nunc id, scelerisque risus. Vivamus interdum metus odio, et dapibus dolor hendrerit ut. Suspendisse non laoreet nisi. Proin at risus vel dolor facilisis dictum.</p>
<p>Donec at diam euismod, imperdiet mauris sed, molestie ante. Ut vehicula neque tellus, id mattis libero commodo id. Sed et semper nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam auctor suscipit leo. Mauris egestas lacinia
est. Vestibulum vitae nulla nisi. Phasellus varius diam et turpis commodo iaculis. Aliquam vitae facilisis ligula.</p>
<p>Curabitur id arcu augue. Nullam ac arcu posuere, rutrum nisi vel, finibus metus. Aenean semper sapien a eros condimentum vulputate. Ut ac mattis tortor. Donec libero velit, sodales quis metus id, bibendum eleifend erat. Nam dapibus efficitur dui
id bibendum. Aliquam pretium sodales hendrerit. Fusce commodo urna enim, eget tempus diam ultrices et. Donec egestas augue eget viverra rhoncus. Quisque turpis nibh, vulputate sed velit quis, tempus hendrerit arcu. Aenean nulla purus, dictum rutrum
pretium et, venenatis vel diam. Maecenas auctor ex sit amet leo varius, cursus ultrices urna scelerisque. Nam semper urna nec mi pretium, a aliquet lacus luctus. Curabitur turpis nibh, facilisis ut lobortis sed, suscipit sed ipsum.</p>
<p>Praesent ultricies diam non est posuere, eu commodo metus blandit. In hac habitasse platea dictumst. Aliquam at euismod diam, ut imperdiet lacus. Curabitur ornare quam quis lobortis ultricies. Quisque eget iaculis ante, nec sollicitudin nisi. Proin
metus mi, viverra quis mauris a, tincidunt fringilla velit. Vivamus iaculis eget neque eu feugiat. Nulla tempus convallis turpis ut interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sed accumsan
leo. Sed pharetra malesuada ligula vitae congue. Aenean non erat lobortis, venenatis felis nec, consequat urna.</p>
<p>Nullam vel quam purus. Nullam tempus risus nisi, et consequat nulla semper at. Mauris aliquet dignissim consequat. Integer mollis ante id luctus vestibulum. In hendrerit facilisis mi, at volutpat nibh malesuada ac. Nam finibus fermentum lectus ac
posuere. Pellentesque dapibus mauris eget neque placerat, in tristique dolor convallis. Ut varius euismod elit, eget posuere risus vulputate id. Suspendisse non consectetur neque. Aliquam lobortis augue mi, nec hendrerit neque finibus vitae. Phasellus
ipsum lorem, vehicula et dapibus eu, sollicitudin vitae nibh. Sed mollis, nisl finibus sollicitudin vestibulum, lacus tortor vehicula leo, nec porttitor nibh nulla et lectus. Pellentesque placerat, risus nec hendrerit pulvinar, odio purus pellentesque
odio, et accumsan dui enim id libero. Vivamus varius quam eu interdum porttitor. Nullam in aliquet ipsum.</p>
<p>Etiam interdum ultricies enim non tincidunt. Morbi sapien nulla, aliquet nec dignissim ac, fringilla dictum odio. Nullam interdum interdum urna, in varius risus lobortis vel. Phasellus tempus fringilla urna. Mauris vulputate, purus suscipit ultrices
mollis, massa augue congue leo, eget tempus enim eros in turpis. Vestibulum malesuada consequat dapibus. Quisque suscipit felis nibh, in tincidunt arcu molestie scelerisque. Donec scelerisque, enim sagittis elementum consequat, lacus dolor cursus
tortor, vel vulputate dolor sapien sed nulla.</p>
<p>Maecenas posuere, sapien id aliquam convallis, mi ipsum interdum metus, id elementum mi urna vel lectus. Cras finibus orci quis tortor facilisis viverra. Sed sed ultrices sem. Etiam fermentum felis enim, sed aliquam felis mattis eu. Integer finibus
lorem libero, tristique malesuada mauris feugiat eget. Integer risus metus, lacinia eu augue sit amet, lacinia pretium ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis aliquet felis, eleifend ultrices risus hendrerit
quis. Nulla laoreet tincidunt elit. Integer accumsan purus lorem, non dapibus odio laoreet vel. Proin porttitor est ac sapien ultrices, vitae interdum mi imperdiet. Cras accumsan egestas augue, nec ullamcorper dolor commodo eget.</p>
<p>Aliquam suscipit sit amet ex ut tempus. Nullam nec erat tempus, blandit erat at, malesuada lacus. Donec interdum ut mauris quis facilisis. Nulla tempor, ipsum id finibus sollicitudin, velit tortor convallis dui, in luctus ex lectus eget lorem. Nulla
in quam sed enim consectetur tempus. Maecenas sollicitudin nunc vulputate, pharetra nunc a, sagittis lacus. Mauris eget leo felis. Donec scelerisque sapien at turpis eleifend, in imperdiet magna congue. Nullam rhoncus sit amet turpis a euismod.
Quisque nisl risus, blandit a fringilla non, cursus sit amet urna. Nulla dolor velit, lacinia luctus venenatis sed, imperdiet vitae mi.</p>
<p>Fusce molestie est nisl, vitae viverra massa laoreet a. Nullam eu fringilla libero. In vel convallis nisl. Etiam ultricies eu dolor et semper. Sed consequat ultricies lorem at efficitur. Proin a erat fermentum, pretium neque eget, lobortis augue.
Morbi sem tortor, blandit sit amet orci eu, fermentum condimentum dolor. Etiam finibus efficitur magna in porttitor. Nulla facilisi. Nunc id dapibus urna, eget mattis lorem. Vivamus placerat justo in neque malesuada, et mollis mi fermentum. Vivamus
vel luctus orci, eget convallis nisl. Phasellus ultricies tortor elit, ut tempus urna elementum ac. Sed aliquam, turpis ac gravida tempor, nunc nulla accumsan eros, eu cursus enim turpis et massa.</p>
<p>Integer commodo orci vitae fermentum iaculis. Sed efficitur lectus vitae auctor tempus. Mauris vel facilisis massa. Duis aliquet tristique feugiat. Nullam ornare pellentesque ultricies. Sed vestibulum iaculis odio, gravida varius augue aliquam ut.
Ut luctus euismod pretium. Mauris iaculis, est in aliquet molestie, odio turpis sollicitudin ex, in venenatis risus leo in mauris. Nullam fringilla pretium massa quis finibus. Fusce consectetur aliquet posuere. Aenean at dictum lacus, et hendrerit
augue. Cras rhoncus leo in elit dictum, finibus vulputate lorem euismod. Nunc lorem nibh, laoreet non felis non, cursus tincidunt magna. Nulla volutpat eros auctor purus laoreet congue. Proin in dictum felis, et dapibus erat. Phasellus ultricies
tortor nisl, sit amet vulputate neque sodales consectetur.</p>
</div>
</div>
<img class="print-footer" src="https://via.placeholder.com/300x60?text=Logo">
</div>How could it be fixed so that the text isn't overlapping the header and footer on each page?
