html - How to separate body content with fixed header and footer for multiple pages -
i have 3 separate section header, body , footer create pdf.
header part come @ top of each page , fix.
______________________ | header | |______________________| problem body content, if content big go second page.
______________________ | | | | | body | | | | | |______________________| footer part come @ bottom of each page , fix.
______________________ | footer | |______________________| so if content big , if 2 pages created should 2 pages as:
______________________ | header | |______________________| | | | | | body part1 | | | | | |______________________| | footer | |______________________| and
______________________ | header | |______________________| | | | | | body part2 | | | | | |______________________| | footer | |______________________| i tried table format, working header , content, not worked footer. footer coming in bottom of second page not in first page.
i using laravel dompdf
any appreciated.
html assumes constant uninterrupted sequence of elements, while printed pages require split content sections. best interpreter can without telling otherwise seperate elements onto pages of them fits on single page.
this exhaustive article on smashingmagazine tell lot how use css design html print.
most importantly question, elaborate on @page regions on tidy sheet. relevant top-center , bottom-center regions (which, unlike might think looking @ te document, may extend entire width of document).
using these regions, can define header , footer via css, , style them depending on side of fold they're on if you're designing book. these work adding content directly per css, doesn't require markup in html work.
/* print centered title on every page */ @top-center { content: "title"; color: #333; text-align: center; } /* print title on left side left-hand pages, , vice versa */ @page:left { @top-left { content: "title"; color: #333; } } @page:right { @top-right { content: "title"; color: #333; } } though non-issue since you're using laravel, no browser i've come accross print regions, won't practical regular print stylesheets.
while can lot css, might have content complex create in above way. in case, can use element position:fixed property, render on top/bottom of every page, depending on how style - example this:
@media print { header { position: fixed; top: 0; } footer { position: fixed; bottom: 0; } } html:
<body> <header> above content on screen, , on top of every printed page </header> <main> content flowing , behaving expect </main> <footer> below content on screen, , on bottom of every printed page </footer> </body> 
Comments
Post a Comment