Menu
I am trying to create a report which has a requirement that the footer must be placed at the bottom of the last page. The report body loads dynamically based off how many records are returned from the database. The report could be 1 page or more.
I have tried using a sticky footer, this is OK for viewing the HTML on the website but when the length of the report is greater than 1 page and when viewing the print preview screen, the footer overlaps with the body of the report and the footer remains on the first page instead of moving to the last page.
Does anyone know of a way to place a footer at the bottom of the last page when creating a printable screen that is properly formatted for a user to print without using a sticky footer.
The sticky footer I implemented did not display properly in the print preview screen when there was multiple pages to print.
202
The trick is to use a display:table for the whole document and display:table-row with height:0 for the footer. Since the footer is the only body child that has a display as table-row , it is rendered at the bottom of the page.
Quick answer: Add “display:flex; flex-direction:column; min-height:100vh;” to body or appropriate layout body element, then add “flex:1;” to content wrapper element/section.
CSS
#sticky-footer
{
position: fixed;
bottom: 0px;
}
@media print
{
#sticky-footer
{
position: static;
bottom: auto;
}
}
HTML
<div id="report-content">...</div>
<div id="sticky-footer">...</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
