I am trying to create a footer that get repeated on every printed page (size A4) without overlaping the contet of the page. I tried many varaions either the footer does not stick to bottom and follows the content or it overlaps the content.
<style>
@media print {
#footer {
position: fixed;
bottom:0;
color: black;
}
}
</style>
<table style="width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact">
<thead style = "display: table-header-group;">
<tr>
<td>
Header
</td>
</tr>
</thead>
<tbody style="padding: 20px">
<tr><td>
<div class="content">
<h1>Page Content</h1>
<div id="lines-container"></div>
<script>
// Get the lines container element
var linesContainer = document.getElementById("lines-container");
// Generate 40 lines
for (var i = 0; i < 80; i++) {
var line = document.createElement("div");
line.textContent = "Line " + (i + 1);
linesContainer.appendChild(line);
}
</script>
</div>
</td></tr>
</tbody>
<tfoot id="footer">
<tr>
<td colspan="99" style="border-top: solid 2px #9fdba9;" >
<table>
<tr>
<td colspan="99" style="vertical-align: middle;">
<img src="http://127.0.0.1:5566/view-attachment?N0b3J5" alt="SVG Image"
style="width: 100px; height: 75px; padding: 2px; padding-right: 20px;">
</td>
<td style="vertical-align: middle; text-align: left; padding: 2;">
<div>Address: </div>
<div>Tel: </div>
</td>
<td style="vertical-align: middle; text-align: left; padding: 2;">
<div> Email: </div>
<div> Website: </div>
</td>
</tr>
</table>
</td>
</tr>
</tfoot>
</table>
My issuse is the footer overlapaing the content when I hit Ctrl + P to print it.
2
Answers
You can try
position: sticky
instead ofposition: fixed
.Edit
I find some another solution using one tfoot as invisible space. You can check this below.
I tried everything but didn’t work so I edited your script and added
<div id="lines-container-2"></div>
and gave itmargin-top:60px;
that you can check the result in ctrl+p