14

I have a web page that a client would like to print, and the part I'm having trouble getting my head around is to get the footer to sit at the bottom of the last printed page, not just when the content ends

I tried something like 

 #printfooter{display: block; position:fixed; bottom: 0;}

but it displayed the footer at the end of each page.

Maybe Im asking a bit too much from CSS... Is it doable?

I'm thinking I should just go crazy with <br />'s (^_^)

Assembler
  • 794
  • 1
  • 8
  • 24

1 Answers1

4

Try to position the body relative and the footer absolute:

body {
    position: relative;
}
#printfooter {
    position: absolute;
    bottom: 0;
}

With CSS 3 Paged Media module you could use something like this:

@page:last {
    @bottom-center {
        content: "…";
    }
}
Lou Franco
  • 87,846
  • 14
  • 132
  • 192
Gumbo
  • 643,351
  • 109
  • 780
  • 844
  • 3
    yeah! ...but nah... the first one's good for one page, but not for two... CSS3 is probably not going to be supported on the client's client's broswers (as cool as CSS3 is). Thanks, but! – Assembler Jul 27 '09 at 07:41
  • 3
    The problem with the first example is that the `body` needs to be a multiple of the height of the sheet of paper. Otherwise the footer will just sit at the end of the content and not at the end of the sheet. – Gumbo Jul 27 '09 at 13:00
  • 11
    I don't see any mention of the :last pseudo class in the CSS spec that you linked. It's not a valid pseudo class. – Hugo St-Arnaud May 29 '18 at 20:36
  • I ended up just changing the elemet to a regular . And styled as the footer. The .footer now ends up on the last printed page (ie. where the table end) – Out of Orbit Nov 14 '19 at 11:21