Display element at bottom of last page

[Barney Carroll]

I'm trying to produce documents where a single footer element will be displayed at the bottom of the last page.

In modern CSS, the intuitive way to achieve this is:

html, body {

  min-height: 100%;

  position: absolute;

}

body {

  display: flex;

  flex-direction: column;

}

body > :last-child {

  margin-top: auto;

  page-break-inside: avoid;

  page-break-before: auto;

}

This works as printed by modern browsers for single page documents, but if the content stretches beyond a single page, neither height nor min-height on the container seem to work. With wkhtmltopdf however, the last element is never positioned at the bottom, even if I convert to old-style flex specifications.

The next thing I tried is to absolutely position the last element at the bottom, and use Javascript to measure its height and apply that as a bottom margin to the preceding element (to avoid overlap). Again, browsers have a problem with html / body height and absolute bottom is always the bottom of the first page in 'real' browsers - so if the content stretches over multiple pages the last static element will have its bottom margin but the footer will overlay at the bottom of the first page.

In wkhtmltopdf however, the html / body box model still doesn't even stretch to the bottom of the first page.

I'm considering using the wkhtmltopdf API to define footer content and use Javascript within that to query page number & page total, and only display the content when the two match (ie the last page has been matched). But this seems like a lot of overkill.

Is there a pure HTML + CSS solution for consistently positioning an element at the bottom of the last page?

Thanks!

Barney