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:

.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 ?

回答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.

回答2:

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

回答3:

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.

来源：https://stackoverflow.com/questions/57241600/css-print-page-footer-only-on-last-page

标签

html

css

printing