# Gestión de encabezados, pies de página y saltos de página en PDF
Los saltos de página pueden ser confusos.
La regla `page-break-after` CSS siempre funcionará si se aplica correctamente. Sin embargo, esta regla no funcionará si tu hoja de estilos cambia un `div` de `display:block`. Asegúrate de que la regla `page-break-after` se aplique a un elemento a nivel de bloque, preferiblemente un `div` que sea un hijo directo de la etiqueta body.
El siguiente ejemplo de HTML demuestra:
```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 necesita repetir **encabezados y pies de tabla** en cada página PDF, consulte este artículo: [Agregar o evitar saltos de página en PDFs HTML](/how-to/html-to-pdf-page-breaks/)
Si los pasos anteriores no resuelven su problema, por favor intente lo siguiente:
## 1. Simplificar el tema
Si su contenido varía en longitud, pruebe el contenido de longitudes variables, para asegurarse de que está utilizando el HTML/CSS correcto. Esta [herramienta](https://www.lipsum.com/) se puede usar para ayudar.
## 2. Valida tu HTML y CSS
[Validador de CSS](https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_input) se puede usar para verificar el estilo CSS utilizado.
[Validador de HTML](https://validator.w3.org/#validate_by_input) se puede usar para ayudarle a validar su entrada HTML.
Además, puede pedir a su diseñador web que revise su HTML, mientras realiza un seguimiento de los cambios.
Por otro lado, el posicionamiento de la sección de divulgación se ve afectado por muchos factores, incluida la estructura de la tabla, `tfoot`, y muchos otros. Por lo tanto, revisar su cadena HTML y estructura seguramente ayudará.
## 3. Comprueba el resultado en la vista previa de impresión de Chrome
IronPDF generará un PDF idéntico al navegador web Chrome de escritorio, gracias al uso del motor de renderizado de PDF de Chrome utilizado en IronPDF.
Por lo tanto, puede verificar la apariencia de su HTML a través de la Vista Previa de Impresión de Chrome y ajustar el HTML en consecuencia. Esto puede requerir prueba y error, pero es la forma más fácil de depurar su HTML.
Aprenda más sobre cómo depurar su HTML a través de la Vista Previa de Impresión de Chrome: [Formato HTML Perfecto en Pixeles](/troubleshooting/pixel-perfect-html-formatting/)
Consulte este artículo para obtener más información sobre el Motor de Renderizado de PDF de Chrome: [¿Qué es el Renderizador de Chrome de IronPDF?](/how-to/pixel-perfect-html-to-pdf/)
## 4. Utilizar las herramientas para desarrolladores de Chrome
Alternativamente, puede usar _Inspeccionar_ en las herramientas de desarrollo de Chrome para buscar CSS final calculado en los elementos. Esto dará más detalle sobre cada elemento HTML presente en la cadena.
## 5. Renderizar el HTML usando IronPDF
Envía tu cadena HTML finalizada o archivo HTML al IronPDF Chrome Renderer y utiliza el método `RenderHtmlAsPdf()` o `RenderHtmlFileAsPdf()` para crear tu documento PDF.
Es posible que necesite especificar algunas opciones de renderizado al renderizador para ajustar su PDF de salida así como la operación de renderizado. Consulte este [artículo](/how-to/ironpdf-2021-chrome-rendering-engine-eap/) para obtener más información.
La regla page-break-after CSS siempre funcionará si se aplica correctamente. Sin embargo, esta regla no funcionará si tu hoja de estilos cambia un div de display:block. Asegúrate de que la regla page-break-after se aplique a un elemento a nivel de bloque, preferiblemente un div que sea un hijo directo de la etiqueta body.
El siguiente ejemplo de HTML demuestra:
<!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 los pasos anteriores no resuelven su problema, por favor intente lo siguiente:
1. Simplificar el tema
Si su contenido varía en longitud, pruebe el contenido de longitudes variables, para asegurarse de que está utilizando el HTML/CSS correcto. Esta herramienta se puede usar para ayudar.
2. Valida tu HTML y CSS
Validador de CSS se puede usar para verificar el estilo CSS utilizado.
Validador de HTML se puede usar para ayudarle a validar su entrada HTML.
Además, puede pedir a su diseñador web que revise su HTML, mientras realiza un seguimiento de los cambios.
Por otro lado, el posicionamiento de la sección de divulgación se ve afectado por muchos factores, incluida la estructura de la tabla, tfoot, y muchos otros. Por lo tanto, revisar su cadena HTML y estructura seguramente ayudará.
3. Comprueba el resultado en la vista previa de impresión de Chrome
IronPDF generará un PDF idéntico al navegador web Chrome de escritorio, gracias al uso del motor de renderizado de PDF de Chrome utilizado en IronPDF.
Por lo tanto, puede verificar la apariencia de su HTML a través de la Vista Previa de Impresión de Chrome y ajustar el HTML en consecuencia. Esto puede requerir prueba y error, pero es la forma más fácil de depurar su HTML.
4. Utilizar las herramientas para desarrolladores de Chrome
Alternativamente, puede usar Inspeccionar en las herramientas de desarrollo de Chrome para buscar CSS final calculado en los elementos. Esto dará más detalle sobre cada elemento HTML presente en la cadena.
5. Renderizar el HTML usando IronPDF
Envía tu cadena HTML finalizada o archivo HTML al IronPDF Chrome Renderer y utiliza el método RenderHtmlAsPdf() o RenderHtmlFileAsPdf() para crear tu documento PDF.
Es posible que necesite especificar algunas opciones de renderizado al renderizador para ajustar su PDF de salida así como la operación de renderizado. Consulte este artículo para obtener más información.
Curtis Chau tiene una licenciatura en Ciencias de la Computación (Carleton University) y se especializa en el desarrollo front-end con experiencia en Node.js, TypeScript, JavaScript y React. Apasionado por crear interfaces de usuario intuitivas y estéticamente agradables, disfruta trabajando con frameworks modernos y creando manuales bien estructurados y visualmente atractivos.
