Коллизии верхних и нижних колонтитулов ⇐ CSS

[Anonymous]

Я использую HTML и CSS для печати документов, мне приходится печатать верхний и нижний колонтитулы на каждой странице, и это работает, но если высота заголовков превышает определенную высоту, содержимое отображается поверх заголовка. >
Это шаблон, который я создал.

Код: Выделить всё

.page-footer {
position: fixed;
bottom: 0;
width: 100%;
}

.page-header {
position: fixed;
top: 0mm;
width: 100%;
}

@page {
margin: 15pt
}

@media print {
thead {
display: table-header-group;
}

tfoot {
display: table-footer-group;
}

button {
display: none;
}

body {
margin: 0;
}
}

















































window.addEventListener("load", () => {
const header = document.getElementById("header");
const footer = document.getElementById("footer");

const headerHeight = header.scrollHeight + 20;
const footerHeight = footer.scrollHeight + 20;

document.getElementById("page-header").style.height = headerHeight + "px";
document.getElementById("page-header-space").style.height = headerHeight + "px";

document.getElementById("page-footer").style.height = footerHeight + "px";
document.getElementById("page-footer-space").style.height = footerHeight + "px";
});

Я пробовал другие методы, например, использование таких библиотек, как selectpdf (медленный), IronPdf (дорогой) и других, но, похоже, они не достигли цели. Поэтому я решил попробовать сам.

Подробнее здесь: https://stackoverflow.com/questions/786 ... -colliding