Header and Footer in Each Page in Print Mode With CSS

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:

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

css print mode: display header and footer only on first page of a generated word doc

When comparing word generated html, I have missed one crucial mso css tag :

mso-first-header: url ...

Instead of mso-header.

Together with that, the attribute mso-title-page must also be set to yes.

By combining these two you get the desired effect!

Creating page headers and footers using CSS for print

Putting an element to the top of each page:

@page {
  @top-center {
    content: element(pageHeader);
  }
}
#pageHeader{
  position: running(pageHeader);
}

See http://www.w3.org/TR/css3-gcpm/#running-elements (works in Flying Saucer)

---

Related Topics