footer not showing up when there are multiple pages (for print layout)

Question

Hey guys i have a footer that i want to put in my print layout. So i have a header that shows up correctly but my footer only comes out when i have a page that only has 1 page, but when i have 2 or more pages the footer does not appear at the bottom of hte print layout. Any thoughts?

HTML:

<div class= "different_header">
  <img src="css_images/seal2.png"/>
  <div class="title_print">
   <strong>I like turtles
  </strong> 
  </div>
    <div class="form_title">
      insert form title here
    </div>
  </br>
</br>
</br>
  <div class="reporting_period">
     stuffffffffffffffffffffffff
  </div>
</div>
<div class= "different_footer">
  1423 Chrstine Court, Suite 203, Largo, Florida 20774</br>
  MAIN (414) 333-4444 FAX (233) 123-1234 MD RELAY SERVICE 711
</div>

CSS:

@media print{

    .different_header, .different_footer {
            display: block; 
        }
        .different_header{
            text-align: center;
            float:left;
            padding-left: 40px;
        }
        img{
            text-align: center;
            float:left;
            padding-left: 40px;
        }
       .form_title, .title_print{
            text-align: center;
       }
       .reporting_period {
            text-align: center;
            padding-left: 50px;
       }
        .different_footer {
            position: absolute;
            text-align: center;
            padding-left: 100px;
            bottom: 0;
        }
}

EDIT: still havent found an answer anyone have any other thoughts?

Possible duplicate of [this older question](http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page)? It looks like the solution is to use `position:fixed` instead of `absolute`. — Austin Mullins, Mar 09 '15 at 18:10
hmmm good looks let me try this and i guess ill just delete this post if it works — zomdar, Mar 09 '15 at 18:18

score 0 · Answer 1 · answered Mar 09 '15 at 18:45

0

Please Try using this:

#footer {
  display: table-footer-group;
}

please also try to read this: http://www.codeproject.com/Questions/247645/Print-html-table-into-A4-size

answered Mar 09 '15 at 18:45

Tarun Mahashwari

338
1
10
19

footer not showing up when there are multiple pages (for print layout)

1 Answers1