How to get the a header and footer to not overwrite the text of the main section using @page when converting from html to pdf and more than one page [closed]

Question 1

I am trying to use CSS to create a PDF document from an HTML document. I need to have a header and a footer on each page when there are one or more pages. The problem I have is that the header and footer hide the first and last part of every page. I have tried getting the header into the margin top and the footer into the margin bottom area of the @page tag but have not been able to.

If you go to the following URL

https://www.w3schools.com/cssref/tryit.php?filename=trycss_atrule_page

and drop the following code into the try it window you will see what I am getting. I have borders just to see what was what.

w3schools is just a suggestion to try the code. JS Fiddle would work as well. Drop the HTML into the HTML window and the CSS into the style window.

This would work if the header and footer are put in the @page margin top and margin bottom
<!DOCTYPE html>
<html>
<head>
<style> 
/* 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);
}*/
</style>
</head>
<body>
<main>
<header class="print-header">
<p style="margin: 0in 0in 8pt; line-height: 115%; font-size: 12pt; font-family: Aptos, sans-serif; text-align: left;">Test Header Test Header Test Header Test header Test Header Test Header Test Header Test Header Test Header</p>
</header>
<p>First Page!1</p>
<p>Second Page!1</p>
<p>Third Page!1</p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<p>First Page!2</p>
<p>Second Page!2</p>
<p>Third Page!2</p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<p>First Page!3</p>
<p>Second Page!3</p>
<p>Third Page!3</p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<p>First Page!4</p>
<p>Second Page!4</p>
<p>Third Page!<4/p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<p>First Page!5</p>
<p>Second Page!5</p>
<p>Third Page!5</p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<p>First Page!6</p>
<p>Second Page!6</p>
<p>Third Page!6</p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<p>First Page!</p>
<p>Second Page!</p>
<p>Third Page!</p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<p>First Page!</p>
<p>Second Page!</p>
<p>Third Page!</p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<p>Click on the button to send the document to the printer, and see how it looks in print preview!</p>
<button>Print Page</button>
<script>
document.querySelector("button").addEventListener("click", () => {
 window.print();
});
</script>
<footer class="print-footer">
<div style="font-size: 9.0pt; line-height: 115%; font-family: Helvetica, sans-serif;"><strong>Notice:</strong> 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 <strong>Bureau of Consumer Financial Protection, 1700 G Street NW, Washington, DC 20006</strong>.<br><br>
<p style="margin: 0in; font-size: 12pt; font-family: Aptos, sans-serif;"><span style="font-size: 10.0pt; font-family: Arial, sans-serif;">BBLC-EXT-RLOC                                          A division of Zions Bancorporation, N.A. Member FDIC</span></p>
</div>
</footer>
</main>
</body>
</html>

Question 2

What change are you recommending to my code above. Thanks for any input.

Question 3

Please edit your question and make sure you have a minimal reproducible example that doesn't depend on 3rd party websites. Don't link to your code.

Question 4

Thanks for the answer behnam. I tried it and it did have a header and footer but it only had a header on the first page and a footer on the last page but not a header and footer on every page which is what I am looking for. To the editor I will clarify my question tomorrow. Any tool such as JS Fiddle can be used to test this. W3schools was just a suggestion.

Question 5

@page {
 margin-top: 100px;
 margin-bottom: 80px;
 
 @top-center {
 content: element(header);
 }
 
 @bottom-center {
 content: element(footer);
 }
}
.header {
 position: running(header);
 height: 80px;
 text-align: center;
}
.footer {
 position: running(footer);
 height: 60px;
 text-align: center;
}
.main-content {
 margin: 0;
 padding: 20px;
}

Question 6

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Question 7

You're likely to get a more favourable response to your post if you take the time to explain your answer, including talking about what you've done and why you expect that it solves the problem. Just dumping code is actually not very helpful most of the time. See also How to Answer. Thanks.

behnam 4s 12 bronze badges · Accepted Answer · 2025-11-11 06:04:11Z

-2

@page {
 margin-top: 100px;
 margin-bottom: 80px;
 
 @top-center {
 content: element(header);
 }
 
 @bottom-center {
 content: element(footer);
 }
}
.header {
 position: running(header);
 height: 80px;
 text-align: center;
}
.footer {
 position: running(footer);
 height: 60px;
 text-align: center;
}
.main-content {
 margin: 0;
 padding: 20px;
}

Share

Improve this answer

answered Nov 11 at 6:04

behnam 4s's user avatar

behnam 4s

12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Community

Community Nov 11 at 6:05

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

2025年11月11日T06:05:26.983Z+00:00

ADyson

ADyson Nov 11 at 14:52

You're likely to get a more favourable response to your post if you take the time to explain your answer, including talking about what you've done and why you expect that it solves the problem. Just dumping code is actually not very helpful most of the time. See also How to Answer. Thanks.

2025年11月11日T14:52:02.283Z+00:00

CollectivesTM on Stack Overflow

How to get the a header and footer to not overwrite the text of the main section using @page when converting from html to pdf and more than one page [closed]

1 Answer 1

2 Comments

Hot Network Questions

CollectivesTM on Stack Overflow

1 Answer 1

2 Comments

Related