Css Print Page Footer Only On Last Page

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: ab

Solution 1:

You can try wrapping your header and main area of body in its own container and then giving it a min-height property of 100vh. This should push your footer to the very bottom as the the header and main sections always takes up the main viewport.

Solution 2:

I ran into a similar issue and found a working solution.

I inserted a <div id="spacer"> in front of my footer and gave it page-break-after: always. That made my footer appear right on top of a new empty page following my content. I then gave my footer margin-top: -130px (or whatever height your footer has). That made is go back one page and placed it right at the bottom of my last page, as desired.

There are 2 downsides:

• My generated pdf file has an empty page at the end

• I have to make sure that there is enough space for the footer to appear

Nonetheless this is a (seemingly only?) way to place a footer only on the last page when printing html.

Solution 3:

Just wrap the footer with the last page container. Treat the footer as just another div.