Print header/footer on all pages (Print Mode)

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:

<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>

<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;
}

Comments

Popular posts from this blog

Bootstrap Breakpoints