css html footer

Question

I am re-writing this question to better convey the problem:

I have 3 output mechanisms:

1. Screen
2. PDF
3. Print

PDF's are generated using the same media type as screen.

On screen: I just want the footer to appear below the content ... Simple... easy!

PDF: I want the footer to display at the bottom of the last page of the content

Print: As above, I want the footer to display at the bottom of the last page of the content

The problem is: If I set absolute positioning for media type=print there are two problems:

1. This has no effect of the PDF display
2. If the content spans over multiple pages, the content prints under the footer which is fixed at the bottom of the first page.

If on screen - I need footer to display at the bottom of an imaginary page so that when the pdf is generated, it appears at the bottom of the last page of content

If on print - I need footer to display at the bottom of the last page of content

Answer 1

You should definitely check out http://www.cssstickyfooter.com/. It's an excellent, modern "sticky footer" solution. At a minimum, it should help lead you in the right direction.

Answer 2

1. Use a single container css class.
2. Add the footer to the end after header & body containers.
3. Set the container height to 100% & the footer class will appear at the bottom.

Answer 3

You can achieve this by having a separate CSS stylesheet for printed documents. CSS Media Types allow you specify separate rules for printed documents (and many other representations).

If this is the only style that needs special handling then you can put the print style in your existing stylesheet like this:

#footer { position: static; }

@media print {
    #footer { position: absolute; bottom: 0; }
}

If you have a lot of print-specific rules, put them in a separate stylesheet and include both stylesheets in your HTML like this:

<link rel="stylesheet" type="text/css" href="all.css">
<link rel="stylesheet" type="text/css" media="print" href="printonly.css">

When displayed on the screen only the all.css stylesheet will be used; when printed both the all.css and the printonly.css stylesheet will be used — so you don't need to duplicate your styles in both files, just add printer-specific ones to printonly.css.

Useful reference:

http://www.w3.org/TR/CSS21/media.html

Answer 4

You can define 2 stylesheets for the page; 1 for "screen" and 1 for "print". Link to them this way:

<LINK rel="stylesheet" type"text/css" href="screen.css" media="screen">
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

This way you have total separation of how each device should render your page.