CSS print style for a fixed footer on the last page

Question

I have an HTML article that is supposed to be optimized for printing, so I added a print stylesheet. When I try to fix the to the bottom of the last page it is always positioned after the last bit of content instead of the bottom of the last page.

Is there any way to have the footer fixed to the bottom of the last page only?

I tried @page { margin: 0 0 0 0 } makes no difference unfortunately. ( regarding the position of the footer ) — derp, Mar 05 '19 at 14:57
https://stackoverflow.com/questions/21032137/sticking-custom-footer-on-each-page-to-bottom-while-printing — brooksrelyt, Mar 05 '19 at 15:04

score 1 · Answer 1 · answered Mar 05 '19 at 15:01

1

use this

#footer {
    clear: both;
    position: relative;
    height: 40px;
    margin-top: -40px;
}

answered Mar 05 '19 at 15:01

xmaster

1,042
7
20

This works if I set the HTML file up from scratch however it does not work if I try to apply it on an existing HTML structure with a lot of nested divs. Anyways I believe the problem is on my side and your answer provides the proper solution. Thank you. – derp Mar 05 '19 at 15:18
@derp maybe you can give 1 div or your footer a class and use `.footer` – xmaster Mar 06 '19 at 07:11
1

It is not the soluion to the problem after all. There is no way to make a footer stick to the bottom of the last page of a multi page document unless maybe you're restricted to FF only or refactor the entire HTML e.g. working with a table structure or nested divs, setting the height of the outer div to 100% each. It does not work for a continous "document" that spreads over multiple pages. – derp Mar 28 '19 at 17:29

CSS print style for a fixed footer on the last page

1 Answers1