# Kopfzeilen, Fußzeilen und Seitenumbrüche in PDF-Dateien verwalten
Seitenumbrüche können verwirrend sein.
Die `page-break-after` CSS-Regel wird immer funktionieren, wenn sie korrekt angewendet wird. Diese Regel wird jedoch nicht funktionieren, wenn Ihr Stylesheet ein `div` von `display:block` ändert. Stellen Sie sicher, dass die `page-break-after` Regel auf ein Block-Element angewendet wird, vorzugsweise ein `div`, das ein direktes Kind des Body-Tags ist.
Das HTML-Beispiel unten zeigt:
```html
<!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>
```
Wenn Sie stattdessen wiederholende **Tabellenkopf- und Fußzeilen** auf jeder PDF-Seite benötigen, lesen Sie diesen Artikel: [Seitenumbrüche in HTML-PDFs hinzufügen oder vermeiden](/how-to/html-to-pdf-page-breaks/)
Wenn die oben genannten Schritte Ihr Problem nicht lösen, versuchen Sie bitte Folgendes:
## 1. Vereinfachen Sie das Problem
Wenn Ihre Inhalte variierende Längen haben, testen Sie die Inhalte variabler Längen, um sicherzustellen, dass Sie das richtige HTML/CSS verwenden. Dieses [Werkzeug](https://www.lipsum.com/) kann dabei helfen.
## 2. Validieren Sie Ihr HTML und CSS
[CSS-Validator](https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_input) kann verwendet werden, um das verwendete CSS-Styling zu überprüfen.
[HTML-Validator](https://validator.w3.org/#validate_by_input) kann Ihnen helfen, Ihre HTML-Eingabe zu validieren.
Außerdem können Sie Ihren Webdesigner bitten, Ihr HTML zu überprüfen, während Sie Änderungen nachverfolgen.
Andererseits wird die Positionierung des Offenlegungsabschnitts von vielen Faktoren, einschließlich der Tabellenstruktur, `tfoot` und vielen anderen, beeinflusst. Daher wird Ihnen eine doppelte Überprüfung Ihres HTML-Strings und -Strukturen sicherlich helfen.
## 3. Überprüfen Sie die Ausgabe in Chrome's Druckvorschau
IronPDF gibt ein identisches PDF für den Chrome-Webbrowser auf dem Desktop aus, dank der Verwendung der Chrome-PDF-Rendering-Engine in IronPDF.
Daher können Sie das Aussehen Ihres HTMLs über die Chrome-Druckvorschau prüfen und das HTML entsprechend anpassen. Dies kann Versuch und Irrtum erfordern, aber es ist der einfachste Weg, Ihr HTML zu debuggen.
Erfahren Sie mehr darüber, wie Sie Ihr HTML über die Chrome-Druckvorschau debuggen: [Pixel Perfect HTML Formatierung](/troubleshooting/pixel-perfect-html-formatting/)
Mehr Informationen zur Chrome-PDF-Rendering-Engine finden Sie in diesem Artikel: [Was ist der Chrome-Renderer von IronPDF?](/how-to/pixel-perfect-html-to-pdf/)
## 4. Verwenden Sie die Chrome-Entwicklerwerkzeuge
Alternativ können Sie _Inspect_ in den Chrome-Entwicklerwerkzeugen verwenden, um kalkulierte finale CSS in Elementen zu suchen. Dies gibt mehr Details zu jedem HTML-Element im String.
## 5. Rendern Sie das HTML mit IronPDF
Senden Sie Ihren fertigen HTML-String oder die HTML-Datei an den IronPDF Chrome Renderer und verwenden Sie die Methode `RenderHtmlAsPdf()` oder `RenderHtmlFileAsPdf()`, um Ihr PDF-Dokument zu erstellen.
Möglicherweise müssen Sie einige Rendering-Optionen an den Renderer spezifizieren, um Ihr Ausgabe-PDF sowie den Rendering-Vorgang fein abzustimmen. Siehe diesen [Artikel](/how-to/ironpdf-2021-chrome-rendering-engine-eap/), um mehr zu erfahren.
Die page-break-after CSS-Regel wird immer funktionieren, wenn sie korrekt angewendet wird. Diese Regel wird jedoch nicht funktionieren, wenn Ihr Stylesheet ein div von display:block ändert. Stellen Sie sicher, dass die page-break-after Regel auf ein Block-Element angewendet wird, vorzugsweise ein div, das ein direktes Kind des Body-Tags ist.
Das HTML-Beispiel unten zeigt:
<!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>
<!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>
Wenn die oben genannten Schritte Ihr Problem nicht lösen, versuchen Sie bitte Folgendes:
1. Vereinfachen Sie das Problem
Wenn Ihre Inhalte variierende Längen haben, testen Sie die Inhalte variabler Längen, um sicherzustellen, dass Sie das richtige HTML/CSS verwenden. Dieses Werkzeug kann dabei helfen.
2. Validieren Sie Ihr HTML und CSS
CSS-Validator kann verwendet werden, um das verwendete CSS-Styling zu überprüfen.
HTML-Validator kann Ihnen helfen, Ihre HTML-Eingabe zu validieren.
Außerdem können Sie Ihren Webdesigner bitten, Ihr HTML zu überprüfen, während Sie Änderungen nachverfolgen.
Andererseits wird die Positionierung des Offenlegungsabschnitts von vielen Faktoren, einschließlich der Tabellenstruktur, tfoot und vielen anderen, beeinflusst. Daher wird Ihnen eine doppelte Überprüfung Ihres HTML-Strings und -Strukturen sicherlich helfen.
3. Überprüfen Sie die Ausgabe in Chrome's Druckvorschau
IronPDF gibt ein identisches PDF für den Chrome-Webbrowser auf dem Desktop aus, dank der Verwendung der Chrome-PDF-Rendering-Engine in IronPDF.
Daher können Sie das Aussehen Ihres HTMLs über die Chrome-Druckvorschau prüfen und das HTML entsprechend anpassen. Dies kann Versuch und Irrtum erfordern, aber es ist der einfachste Weg, Ihr HTML zu debuggen.
Alternativ können Sie Inspect in den Chrome-Entwicklerwerkzeugen verwenden, um kalkulierte finale CSS in Elementen zu suchen. Dies gibt mehr Details zu jedem HTML-Element im String.
5. Rendern Sie das HTML mit IronPDF
Senden Sie Ihren fertigen HTML-String oder die HTML-Datei an den IronPDF Chrome Renderer und verwenden Sie die Methode RenderHtmlAsPdf() oder RenderHtmlFileAsPdf(), um Ihr PDF-Dokument zu erstellen.
Möglicherweise müssen Sie einige Rendering-Optionen an den Renderer spezifizieren, um Ihr Ausgabe-PDF sowie den Rendering-Vorgang fein abzustimmen. Siehe diesen Artikel, um mehr zu erfahren.
Curtis Chau hat einen Bachelor-Abschluss in Informatik von der Carleton University und ist spezialisiert auf Frontend-Entwicklung mit Expertise in Node.js, TypeScript, JavaScript und React. Leidenschaftlich widmet er sich der Erstellung intuitiver und ästhetisch ansprechender Benutzerschnittstellen und arbeitet gerne mit modernen Frameworks sowie der Erstellung gut strukturierter, optisch ansprechender Handbücher.
