title: Need CSS for printed footers on all pages but last, different footer on last
body: <p><strong>What I need to accomplish</strong></p>
  
  <p>I have a web page that is printed out on paper. When viewed on screen, I don't want any footers. When printed out on paper, I'd like the same footer to appear on everyone but the last page, and the last page to have a different footer. Ideally, this will support the modern browsers but also work with IE 7/8 as well.</p>
  
  <p><strong>What I have so far</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Test of paging&lt;/title&gt;
      &lt;style type="text/css"&gt; 
          .page_footer {
              display: none;
              page-break-after: always;
          }
  
          .last_page_footer {
              display: none;
          }
  
          @media print {
              .page_footer {
                  display: block;
                  position: absolute;
                  bottom: 0;
                  page-break-after: always;
              }
  
              .last_page_footer {
                  display: block;
                  position: absolute;
                  bottom: 0;
              }
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;One&lt;/div&gt;
  &lt;div class="page_footer"&gt;Not last footer&lt;/div&gt;
  &lt;div&gt;Two&lt;/div&gt;
  &lt;div class="page_footer"&gt;Not last footer&lt;/div&gt;
  &lt;div&gt;Three&lt;/div&gt;
  &lt;div class="page_footer"&gt;Not last footer&lt;/div&gt;
  &lt;div&gt;Four&lt;/div&gt;
  &lt;div class="last_page_footer"&gt;Last footer&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Currently, it shows up as one page all footers overlapping at the bottom. If I comment out the position values, they show up on separate pages but the footer text doesn't go to the bottom.</p>