# Gestion des en-têtes, pieds de page et sauts de page dans les PDF
Les sauts de page peuvent être déroutants.
La règle CSS `page-break-after` fonctionnera toujours si elle est appliquée correctement. Cependant, cette règle ne fonctionnera pas si votre feuille de style modifie un `div` de `display:block`. Assurez-vous que la règle `page-break-after` est appliquée à un élément de niveau bloc, de préférence un `div` qui est un enfant direct du tag body.
L'exemple HTML ci-dessous illustre :
```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>
```
Si vous avez besoin de **en-têtes et pieds de page de tableau** répétitifs sur chaque page PDF, consultez cet article : [Ajouter ou éviter des sauts de page dans les PDF HTML](/how-to/html-to-pdf-page-breaks/)
Si les étapes ci-dessus ne résolvent pas votre problème, essayez les suggestions suivantes :
## 1. Simplifiez le problème
Si votre contenu varie en longueur, testez des contenus de longueurs variables, pour vous assurer que vous utilisez le bon HTML/CSS. Cet [outil](https://www.lipsum.com/) peut être utilisé pour vous aider.
## 2. Validez votre HTML et CSS
Le [Validateur CSS](https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_input) peut être utilisé pour vérifier le style CSS utilisé.
Le [Validateur HTML](https://validator.w3.org/#validate_by_input) peut vous aider à valider votre entrée HTML.
De plus, vous pouvez demander à votre designer web de vérifier votre HTML, tout en suivant les modifications.
D'autre part, la position de la section de divulgation est affectée par de nombreux facteurs, y compris la structure de la table, `tfoot`, et bien d'autres. Donc, vérifier à nouveau votre chaîne HTML et sa structure vous aidera sûrement.
## 3. Vérifiez la sortie dans l'aperçu avant impression de Chrome
IronPDF produira un PDF identique au navigateur web Chrome de bureau, grâce à l'utilisation du moteur de rendu PDF Chrome employé dans IronPDF.
Par conséquent, vous pouvez vérifier l'apparence de votre HTML via l'aperçu avant impression de Chrome et ajuster le HTML en conséquence. Cela peut nécessiter des essais et erreurs, mais c'est le moyen le plus simple de déboguer votre HTML.
En savoir plus sur comment déboguer votre HTML via l'aperçu avant impression de Chrome : [Formatage HTML à la perfection](/troubleshooting/pixel-perfect-html-formatting/)
Consultez cet article pour plus d'informations sur le moteur de rendu PDF de Chrome : [Qu'est-ce que le rendu Chrome d'IronPDF ?](/how-to/pixel-perfect-html-to-pdf/)
## 4. Utilisez les outils de développement Chrome
Alternativement, vous pouvez utiliser _Inspecter_ dans les outils de développement de Chrome pour rechercher les CSS finales calculées dans les éléments. Cela donnera plus de détails sur chaque élément HTML présent dans la chaîne.
## 5. Rendez le HTML avec IronPDF
Envoyez votre chaîne HTML finalisée ou fichier HTML au Chrome Renderer d'IronPDF et utilisez la méthode `RenderHtmlAsPdf()` ou `RenderHtmlFileAsPdf()` pour créer votre document PDF.
Vous pourriez avoir besoin de spécifier certaines options de rendu au moteur pour affiner votre PDF de sortie ainsi que l'opération de rendu. Voir cet [article](/how-to/ironpdf-2021-chrome-rendering-engine-eap/) pour en savoir plus.
La règle CSS page-break-after fonctionnera toujours si elle est appliquée correctement. Cependant, cette règle ne fonctionnera pas si votre feuille de style modifie un div de display:block. Assurez-vous que la règle page-break-after est appliquée à un élément de niveau bloc, de préférence un div qui est un enfant direct du tag body.
L'exemple HTML ci-dessous illustre :
<!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>
Si les étapes ci-dessus ne résolvent pas votre problème, essayez les suggestions suivantes :
1. Simplifiez le problème
Si votre contenu varie en longueur, testez des contenus de longueurs variables, pour vous assurer que vous utilisez le bon HTML/CSS. Cet outil peut être utilisé pour vous aider.
2. Validez votre HTML et CSS
Le Validateur CSS peut être utilisé pour vérifier le style CSS utilisé.
Le Validateur HTML peut vous aider à valider votre entrée HTML.
De plus, vous pouvez demander à votre designer web de vérifier votre HTML, tout en suivant les modifications.
D'autre part, la position de la section de divulgation est affectée par de nombreux facteurs, y compris la structure de la table, tfoot, et bien d'autres. Donc, vérifier à nouveau votre chaîne HTML et sa structure vous aidera sûrement.
3. Vérifiez la sortie dans l'aperçu avant impression de Chrome
IronPDF produira un PDF identique au navigateur web Chrome de bureau, grâce à l'utilisation du moteur de rendu PDF Chrome employé dans IronPDF.
Par conséquent, vous pouvez vérifier l'apparence de votre HTML via l'aperçu avant impression de Chrome et ajuster le HTML en conséquence. Cela peut nécessiter des essais et erreurs, mais c'est le moyen le plus simple de déboguer votre HTML.
Alternativement, vous pouvez utiliser Inspecter dans les outils de développement de Chrome pour rechercher les CSS finales calculées dans les éléments. Cela donnera plus de détails sur chaque élément HTML présent dans la chaîne.
5. Rendez le HTML avec IronPDF
Envoyez votre chaîne HTML finalisée ou fichier HTML au Chrome Renderer d'IronPDF et utilisez la méthode RenderHtmlAsPdf() ou RenderHtmlFileAsPdf() pour créer votre document PDF.
Vous pourriez avoir besoin de spécifier certaines options de rendu au moteur pour affiner votre PDF de sortie ainsi que l'opération de rendu. Voir cet article pour en savoir plus.
Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes et créer des manuels bien structurés et visuellement attrayants.
