# Gerenciando cabeçalhos, rodapés e quebras de página em PDFs
As quebras de página podem ser confusas.
A regra CSS `page-break-after` sempre funcionará se aplicada corretamente. No entanto, essa regra não funcionará se sua folha de estilo alterar um `div` de `display:block`. Certifique-se de que a regra `page-break-after` seja aplicada a um elemento de nível de bloco, de preferência um `div` que seja um filho direto da tag body.
O exemplo em HTML abaixo demonstra:
```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>
```
Se você precisar repetir **cabeçalhos e rodapés de tabela** em cada página PDF, verifique este artigo: [Adicionar ou Evitar Quebras de Página em PDFs HTML](/how-to/html-to-pdf-page-breaks/)
Se as etapas acima não resolverem o seu problema, tente o seguinte:
## 1. Simplifique a questão
Se o seu conteúdo tiver comprimentos variáveis, teste-o com diferentes versões para garantir que está usando o HTML/CSS correto. Esta [ferramenta](https://www.lipsum.com/) pode ser usada como auxílio.
## 2. Valide seu HTML e CSS
[O Validador CSS](https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_input) pode ser usado para verificar o estilo CSS utilizado.
[O Validador HTML](https://validator.w3.org/#validate_by_input) pode ser usado para auxiliar na validação da sua entrada de HTML.
Além disso, você pode pedir ao seu web designer para verificar seu HTML e acompanhar as alterações.
Por outro lado, o posicionamento da seção de divulgação é afetado por muitos fatores, incluindo a estrutura da tabela, `tfoot` e muitos outros. Portanto, verificar novamente sua string e estrutura HTML certamente ajudará.
## 3. Verifique a saída na Visualização de Impressão do Chrome.
O IronPDF irá gerar um PDF idêntico no navegador Chrome para desktop, graças ao uso do mecanismo de renderização de PDF do Chrome presente no IronPDF.
Portanto, você pode verificar a aparência do seu HTML através da Pré-visualização de Impressão do Chrome e ajustar o HTML conforme necessário. Isso pode exigir algumas tentativas, mas é a maneira mais fácil de depurar seu HTML.
Saiba mais sobre como depurar seu HTML usando a Visualização de Impressão do Chrome: [Formatação HTML perfeita em pixels](/troubleshooting/pixel-perfect-html-formatting/)
Confira este artigo para obter mais informações sobre o mecanismo de renderização de PDF do Chrome: [O que é o renderizador do Chrome da IronPDF?](/how-to/pixel-perfect-html-to-pdf/)
## 4. Utilize as ferramentas de desenvolvedor do Chrome.
Alternativamente, você pode usar a opção _Inspecionar_ nas ferramentas de desenvolvedor do Chrome para procurar CSS final calculado nos elementos. Isso fornecerá mais detalhes sobre cada elemento HTML presente na string.
## 5. Renderize o HTML usando o IronPDF
Envie sua string HTML finalizada ou arquivo HTML para o IronPDF Chrome Renderer e use o método `RenderHtmlAsPdf()` ou `RenderHtmlFileAsPdf()` para criar seu documento PDF.
Você pode precisar especificar algumas opções de renderização para o renderizador a fim de ajustar o PDF de saída, bem como a operação de renderização. Consulte este [artigo](/how-to/ironpdf-2021-chrome-rendering-engine-eap/) para saber mais.
A regra CSS page-break-after sempre funcionará se aplicada corretamente. No entanto, essa regra não funcionará se sua folha de estilo alterar um div de display:block. Certifique-se de que a regra page-break-after seja aplicada a um elemento de nível de bloco, de preferência um div que seja um filho direto da tag body.
O exemplo em HTML abaixo demonstra:
<!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>
Se as etapas acima não resolverem o seu problema, tente o seguinte:
1. Simplifique a questão
Se o seu conteúdo tiver comprimentos variáveis, teste-o com diferentes versões para garantir que está usando o HTML/CSS correto. Esta ferramenta pode ser usada como auxílio.
2. Valide seu HTML e CSS
O Validador CSS pode ser usado para verificar o estilo CSS utilizado.
O Validador HTML pode ser usado para auxiliar na validação da sua entrada de HTML.
Além disso, você pode pedir ao seu web designer para verificar seu HTML e acompanhar as alterações.
Por outro lado, o posicionamento da seção de divulgação é afetado por muitos fatores, incluindo a estrutura da tabela, tfoot e muitos outros. Portanto, verificar novamente sua string e estrutura HTML certamente ajudará.
3. Verifique a saída na Visualização de Impressão do Chrome.
O IronPDF irá gerar um PDF idêntico no navegador Chrome para desktop, graças ao uso do mecanismo de renderização de PDF do Chrome presente no IronPDF.
Portanto, você pode verificar a aparência do seu HTML através da Pré-visualização de Impressão do Chrome e ajustar o HTML conforme necessário. Isso pode exigir algumas tentativas, mas é a maneira mais fácil de depurar seu HTML.
4. Utilize as ferramentas de desenvolvedor do Chrome.
Alternativamente, você pode usar a opção Inspecionar nas ferramentas de desenvolvedor do Chrome para procurar CSS final calculado nos elementos. Isso fornecerá mais detalhes sobre cada elemento HTML presente na string.
5. Renderize o HTML usando o IronPDF
Envie sua string HTML finalizada ou arquivo HTML para o IronPDF Chrome Renderer e use o método RenderHtmlAsPdf() ou RenderHtmlFileAsPdf() para criar seu documento PDF.
Você pode precisar especificar algumas opções de renderização para o renderizador a fim de ajustar o PDF de saída, bem como a operação de renderização. Consulte este artigo para saber mais.
Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais bem estruturados e visualmente atraentes.
