We try to generate invoices with the PrinceXML library. An invoice consist of a header with invoice details, a table with the invoice specification and a footer with payment details. Users can provide input for this footer, so the length of the content varies.

We want to position the footer always on the bottom of the last page. This can easily be done with the flow attributes:

<div id="footer">Some content, which can be short but also very long....</div>

@page {
    margin-bottom: 150px;
    @bottom-center {
        content: flow(footer);
    }
}

#footer {
    flow: static(footer);
}

In this code example we assume each footer takes 150px of space, but due to the dynamic content in the footer this might not always be true. To position the footer in the right way on the invoice with paged media we should solve two problems:

• Find a way to calculate the height of the footer
• Find a way to address the last page of the PDF and only apply the margin-bottom. Otherwise each page gets an extra margin on the bottom for a footer that only exists on the last page. The page:last {} selector seems to be non-existant.

To overcome these problems we found another solution, namely by placing the footer on an absolute bottom position. We only want to put the footer on the last page, so this is not a problem.

#footer {
   position: absolute;
   bottom: 0px;
}

This positions the footer in the right position on the last page and considers the height of the text to be displayed. The only problem is an overlap between the footer and the content of the page. If the table with invoice details reaches to the bottom of the page and/or the footer is high, the text starts to overlap.

What is the best way to place a footer in a PDF with dynamic content and a varying height?

What if you add some padding or margin to the bottom of the table, so that it will never end right at the bottom of the last page and overlap with the footer block?

Thanks for your suggestion Mike. Wouldn't this imply that I still need to determine the height of the footer based on the dynamic content inside it? If I give the table a margin-bottom of 150px, I'm assuming that the height of my footer is always 150px or less. If a user enters a lot of information the height might be increased to more than 150px.

We found another solution this morning, consisting of the following CSS:

#footer {
    float: bottom;
}

For now, this seems to work. The footer is always attached to the bottom margin. If it fits on the current page below the table it will be rendered on the current page. If the page has too less space for the footer to be rendered, a new page is added and the footer is rendered on a blank page.

Does using a bottom float have any disadvantages in our use case you think?

No, that's perfect, I should have thought of it earlier.