How do you place a footer at the bottom of the LAST page when there is dynamic data in the body

Question

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.

Answer 1

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>