Printed Static Footer Overlapping Page Content

Question

I have a static footer which prints on every printed page (yay) but the page content itself goes to the bottom of the printed page as well creating a content collision.

I've tried various page margins and footer margins, but ultimately, the page content isn't in a repeating container, so no margining seems to make a substantive difference. If I add a negative bottom margin to the footer and increase the page bottom margin, the footer is just cut off and restarted on the next printed page.

@page {
    margin-bottom: 30mm;
}
@media only print {
    .report-footer {
        position: fixed;
        bottom: 0px;
        display: block;
        margin-bottom: -10px;
        width: 100%;
        height: 25px;
        border: dashed 1px red;
        overflow: visible;
    }
}

Is there a practical way to solve this display problem?

Answer 1

If you wrap your printable content in a table with a tfoot, the tfoot will also repeat on each page. If you give it a height in css, it will create a space at the bottom of each page that your static footer can occupy without collision.

<table>
    <tbody>
        <tr>
            <td>
                long printable content...
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>&nbsp;</td>
        </tr>
    </tfoot>
</table>

<div class="report-footer">
    footer content...
</div>

with the following CSS

tfoot td {
    height: 30px;
}

.report-footer {
    position: fixed;
    bottom: 0px;
    height: 20px;
    display: block;
    width: 100%;
    border-top: solid 1px #ccc;
    overflow: visible;
}