CSS Print page footer only on last page

Question

First of all, I've searched SO and there is no working solution

I have some long content, and I want to have footer only on last page. I tired:

1)

.footer{       
    position: absolute;
    bottom: 0;
}

If puts footer at the end of first page only.

2) As old answers suggest

@page :last

But :last doesn't exist (as I see from old answer it existed).

3) Normal footer, sure it is shown on the end of all pages.

How can I achieve this, footer only on last page ?

Answer 1

You can try wrapping your header and content in a container with min-height:100vh. This should push your footer to the very bottom.

main {
  min-height: 100vh;
}

<main>
  <h1> The Header </h1>
  <p> The Content </p>
</main>
<footer>
  The Footer
</footer>