Question

<div id="header">header</div>
<div id="content">
    content spanning several pages...
</div>
<div id="footer">Footer - Fixed at the bottom of each page</div>

I want to print #header and #footer on every page in print mode. I searched a lot but nothing seems to work, even position:fixed doesn’t work as expected.

Answer 1

If you’re willing to switch over to tables for your layout (not necessarily ideal), you can do it with the <thead> and <tfoot> elements. They’ll print at the top and bottom of every page:

<table>

  <thead>
     <!-- Will print at the top of every page -->
  </thead>

  <tbody>
     <!-- Page content -->
  </tbody>

  <tfoot>
     <!-- Will print at the bottom of every page -->
  </tfoot>

</table>

Another option is to use display table-header-group and table-footer-group but cross-browser support isn’t great:

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

#main {
  display: table-row-group;
}

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