Как заставить верхний и нижний колонтитулы не перезаписывать текст основного раздела с помощью @page при преобразовании ⇐ Html

[Anonymous]

Я пытаюсь использовать CSS для создания документа PDF из документа HTML. Мне нужно иметь верхний и нижний колонтитул на каждой странице, если есть одна или несколько страниц. У меня проблема в том, что верхний и нижний колонтитулы скрывают первую и последнюю часть каждой страницы. Я попытался поместить заголовок в верхнюю часть поля, а нижний колонтитул в нижнюю часть поля тега @page, но не смог.
Если вы перейдете по следующему URL-адресу
https://www.w3schools.com/cssref/tryit. ... trule_page
и поместите следующий код в окно Try It, вы увидите, что я получаю. У меня есть границы только для того, чтобы посмотреть, что к чему.
w3schools — это всего лишь предложение попробовать код. JS Fiddle тоже подойдет. Перетащите HTML в окно HTML, а CSS — в окно стилей.
This would work if the header and footer are put in the @page margin top and margin bottom






/* Ensure header and footer are fixed for print */
.print-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #f0f0f0;
padding: 10px;
border-bottom: 1px solid #ccc;
z-index: 1000; /* Ensure it stays on top */
}

.print-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #f0f0f0;
padding: 10px;
border-top: 1px solid #ccc;
text-align: center;
z-index: 1000; /* Ensure it stays on top */
}

/* Adjust main content to prevent overlap with fixed header/footer */
main {
margin-top: 300x;
margin-bottom: 300px;
padding: 10px;
border: 10px solid green;
}

/* Page breaks for print */
@page {
margin-top: 100px; /* Space for header */
margin-bottom: 100px; /* Space for footer */
padding: 10px;
border: 10px solid red;
/* Add page numbers if desired, using @top-center, @bottom-right, etc. */
/*@bottom-right {
content: "Page " counter(page) " of " counter(pages);
} */
}

/* Hide header and footer from screen view if not needed */
@media screen {
.print-header, .print-footer {
display: none; /* Or style them differently for screen */
}
}

/* Optional: Add page numbering using JavaScript for dynamic content */
/*.page-number::before {
content: counter(page);
}*/





Test Header Test Header Test Header Test header Test Header Test Header Test Header Test Header Test Header

First Page!1
Second Page!1
Third Page!1
Click on the button to send the document to the printer, and see how it looks in print preview!
Click on the button to send the document to the printer, and see how it looks in print preview!
First Page!2
Second Page!2
Third Page!2
Click on the button to send the document to the printer, and see how it looks in print preview!
Click on the button to send the document to the printer, and see how it looks in print preview!
First Page!3
Second Page!3
Third Page!3
Click on the button to send the document to the printer, and see how it looks in print preview!
Click on the button to send the document to the printer, and see how it looks in print preview!
First Page!4
Second Page!4
Third Page!
Click on the button to send the document to the printer, and see how it looks in print preview!
Click on the button to send the document to the printer, and see how it looks in print preview!
First Page!5
Second Page!5
Third Page!5
Click on the button to send the document to the printer, and see how it looks in print preview!
Click on the button to send the document to the printer, and see how it looks in print preview!
First Page!6
Second Page!6
Third Page!6
Click on the button to send the document to the printer, and see how it looks in print preview!
Click on the button to send the document to the printer, and see how it looks in print preview!
First Page!
Second Page!
Third Page!
Click on the button to send the document to the printer, and see how it looks in print preview!
Click on the button to send the document to the printer, and see how it looks in print preview!
First Page!
Second Page!
Third Page!
Click on the button to send the document to the printer, and see how it looks in print preview!
Click on the button to send the document to the printer, and see how it looks in print preview!
Print Page

document.querySelector("button").addEventListener("click", () => {
window.print();
});


Notice: The federal Equal Credit Opportunity Act prohibits creditors from discriminating against credit applicants on the basis of race, color, religion, national origin, sex, marital status, age (provided the applicant has the capacity to enter into a binding contract); because all or part of the applicant's income derives from any public assistance program; or because the applicant has in good faith exercised any right under the Consumer Credit Protection Act. The federal agency that administers compliance with this law concerning this creditor is Bureau of Consumer Financial Protection, 1700 G Street NW, Washington, DC 20006.

BBLC-EXT-RLOC                                                                                   A division of Zions Bancorporation, N.A. Member FDIC







Подробнее здесь: https://stackoverflow.com/questions/798 ... in-section