3

I have a standard website, and when printed (for PDF-making purposes on Safari OS X), I'd like the footer to align to the bottom of whatever printed page it is on — i.e. the last page of the document.

Like this:

Print-footer-align-to-bottom

Is that possible?


I have used a media query (@media print { }) for all other print stylesheet details (excluded for simplicity).

Demo code is here; for the screen page itself, here is the HTML:

<div id="footer">
    <p>A bunch of example stuff inside here...</p>
</div>

Which is situated with absolute positioning:

#footer {
    color: #fff;
    background: #000;
    width: 100%;
    position: absolute;
    bottom: 0px;
}
Baumr
  • 6,124
  • 14
  • 37
  • 63
  • Possible duplicate - http://stackoverflow.com/questions/1176770/footer-on-last-printed-page – ChrisF Mar 14 '13 at 10:46
  • 1
    @ChrisF, the solution to that question didn't work — it puts it on the first page. This question is about putting it on the bottom of the last page. – Baumr Mar 14 '13 at 18:03

1 Answers1

3

Bit of an old one but the answer is surely to use the @page:last selector, but you have to alter the CSS for the footer as well.

#footer { position: static; }

@page:last {
    @bottom-center { content:element(footer) }
}
Charles Goodwin
  • 6,402
  • 3
  • 34
  • 63