How to separate body content with fixed header and footer for multiple pages
I Have three separate section as header, body and footer to create pdf.
Header part will come always at top of each page and it will be fix.
______________________
| header |
|______________________|
Problem is with body content, if content is big it will go to second page.
______________________
| |
| |
| body |
| |
| |
|______________________|
Footer part will come always at bottom of each page and it will also fix.
______________________
| footer |
|______________________|
So If content is big and if two pages created then I should get two pages as:
______________________
| header |
|______________________|
| |
| |
| Body Part1 |
| |
| |
|______________________|
| footer |
|______________________|
And
______________________
| header |
|______________________|
| |
| |
| Body part2 |
| |
| |
|______________________|
| footer |
|______________________|
I tried with table format, It is working for header and content, but not worked for footer. Footer is coming only in bottom of second page not in first page.
I am using laravel dompdf
Any help would appreciated.
Answer
HTML assumes a constant uninterrupted sequence of elements, while printed pages require to split that content into sections. The best an interpreter can do without you telling it otherwise is to seperate elements onto pages so that most of them fits on a single page.
This very exhaustive article on SmashingMagazine will tell you a lot about how to use CSS to design HTML for print.
Most importantly for your question, it will elaborate on @page regions on a tidy sheet. Relevant for you will likely be the top-center and bottom-center regions (which, unlike you might think looking at te document, may very well extend to the entire width of the document).
Using these regions, you can define header and footer via CSS, and even style them depending on the side of the fold they're on if you're designing a book. These work by adding content directly per CSS, so it doesn't require any markup in your HTML to work.
/* print a centered title on every page */
@top-center {
content: "Title";
color: #333;
text-align: center;
}
/* print the title on the left side for left-hand pages, and vice versa */
@page:left {
@top-left {
content: "Title";
color: #333;
}
}
@page:right {
@top-right {
content: "Title";
color: #333;
}
}
Though a non-issue for you since you're using laravel, no browser I've come accross will print those regions, so it won't be all that practical for regular print stylesheets.
While you can do a lot with CSS, you might have content that is too complex to create it in the above way. In this case, you can use an element with the position:fixed property, which will render on the top/bottom of every page, depending on how you style it - for example like this:
@media print {
header {
position: fixed;
top: 0;
}
footer {
position: fixed;
bottom: 0;
}
}
HTML:
<body>
<header>
above the content on screen, and on the top of every printed page
</header>
<main>
content that is flowing and behaving as you would expect it
</main>
<footer>
below the content on screen, and on the bottom of every printed page
</footer>
</body>