0

I am trying to print a webpage in PDF. This PDF will be a few pages long and have a footer that should appear on the last page and stick to the bottom.

The issue is that I can both have the footer appear at the end of each pages or only the first one. But not only on the last one.

I think that I've tried all stackoverflow answers to similar questions but none of them worked.

For example this CSS rule make the footer stick to the bottom of the first page only :

@media print {
  .container {
    position: absolute;
    bottom: 0;
    page-break-inside: avoid;
  }
}

While this one make the footer appear at the bottom of each pages :

@media print {
  .container {
    position: fixed;
    bottom: 0;
    page-break-inside: avoid;
  }
}

I have also tried every position possible, none of them worked as I wanted. If it's not possible using only CSS, the other possibility that I've thought about is to place a div between the footer and the last div so that I can, using javascript, calculate the height needed for the footer to be at the bottom. Only problem with that is that I don't know how to it when printing.

PS: I am sorry if my English is a little bit hard to read, I am not really good.

Maxime
  • 31
  • 3
  • Does this answer your question? https://stackoverflow.com/questions/23242019/print-footer-only-in-last-printed-page-for-media-print – Diego D Jul 15 '22 at 10:13
  • I've seen this one while searching for an answer and sadly no it did not work. Mainly because page:last is not a valid selector from what I've read on other questions. – Maxime Jul 15 '22 at 10:16
  • yes you are right I found further reference saying that (if it was ever considered) it was dropped by latest css3 specifications. Anyway there's another possible solution using named pages. I found a reference here.. https://stackoverflow.com/questions/42136333/css-paged-media-last-page-selector .. I don't like it very much.. but maybe you'll find useful to cover that one also – Diego D Jul 15 '22 at 10:22
  • I tried using named pages to just change background-color in order to see if the selector was working and it did not do anything. So i guess that it's not. – Maxime Jul 15 '22 at 10:30

0 Answers0