Managing Headers, Footers & Page Breaks in PDFs
Page breaks can be confusing.
The page-break-after CSS rule will always work if applied correctly. However, this rule will not work if your style sheet changes a div from display:block. Ensure that the page-break-after rule is applied to a block-level element, preferably a div that is a direct child of the body tag.
The HTML example below demonstrates:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Page Breaks with Header and Footer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
position: fixed;
width: 100%;
text-align: center;
background-color: #f1f1f1;
padding: 10px 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
.content {
margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
}
.page-break {
page-break-after: always;
display: block; /* Ensure it remains a block-level element */
}
</style>
</head>
<body>
<header>
<h1>Document Title</h1>
<p>Header Content</p>
</header>
<footer>
<p>Footer Content</p>
</footer>
<div class="content">
<div class="page-break">
<h2>Section 1</h2>
<p>This is the first section. After this section, there will be a page break.</p>
</div>
<div class="page-break">
<h2>Section 2</h2>
<p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
</div>
</div>
</body>
</html>If you require repeating table headers and footers in every PDF page instead, check out this article: Add or Avoid Page Breaks in HTML PDFs
If the above steps do not resolve your issue, please try the following:
1. Simplify the issue
If your content varies in length, test the contents of variable lengths, to ensure that you are using the correct HTML/CSS. This tool can be used to assist.
2. Validate your HTML and CSS
CSS Validator can be used to check the CSS styling used.
HTML Validator can be used to assist you in validating your HTML input.
Additionally, you can ask your web designer in checking your HTML, while tracking changes.
On the other hand, positioning of disclosure section is affected by many factors including table structure, tfoot, and many others. So double-checking your HTML string and structure will surely help.
3. Check the output in Chrome's Print Preview
IronPDF will output an identical PDF to the desktop Chrome web browser, thanks to the use of Chrome PDF rendering engine used in IronPDF.
Therefore, you may check the appearance of your HTML through Chrome Print Preview and adjust the HTML accordingly. This may require trial-and-error, but it is the easiest way to debug your HTML.
Learn more on how to debug your HTML via Chrome Print Preview: Pixel Perfect HTML Formatting
Check out this article for more information on Chrome PDF Rendering Engine: What is IronPDF's Chrome Renderer?
4. Use the Chrome developer tools
Alternatively, you can use Inspect in the Chrome developer tools to look for calculated final CSS in elements. This will give more detail on each HTML element present in the string.
5. Render the HTML using IronPDF
Send your finalized HTML string or HTML file to IronPDF Chrome Renderer and use RenderHtmlAsPdf() or RenderHtmlFileAsPdf() method to create your PDF document.
You may need to specify some rendering options to the renderer in order to fine-tune your output PDF as well as rendering operation. See this article to learn more.
Curtis Chau holds a Bachelor’s degree in Computer Science (Carleton University) and specializes in front-end development with expertise in Node.js, TypeScript, JavaScript, and React. Passionate about crafting intuitive and aesthetically pleasing user interfaces, Curtis enjoys working with modern frameworks and creating well-structured, visually appealing manuals.
