Print Footer on Every Printed Page from Website, Across All Browsers (Chrome)

Print repeating Page headers in Chrome

Ok, no takers on this one, so with a few more days of looking around and choosing not to write my own solution, here is what I found.

At the very bottom of a Stack post with no votes and no comments was this lonely little link: http://welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243

This thing is awesome, it's designed to handle wide pages of content and format them into columns like a newspaper. It handles page breaks especially well and is quite flexible.

In my case, I needed a single column (width of the page) and repeating headers and footers. I used Example 10 as my base:http://welcome.totheinter.net/autocolumn/sample10.html

I simply added the link to the plug in, changed the necessary IDs and classes to suit my page, and made some minor CSS changes to heights and widths and I was able to print multi-page content with repeating headers and footers in Google Chrome! (my company's preferred browser)

TIPS:

One little CSS trick, I made the content div MIN-HEIGHT set so it
pushed the footer down on short pages. (Don't do this if you want the user to have the option of portrait or landscape). My final print is fixed so this was great for me.
I tested different heights on content to see how it breaks the content, it was smooth everytime.

I did try to post my final example in JsBin and Fiddle, but it ran an error each time.

So again, Example 10 above is a great place to start as it shows before and after.

Here is my final with variable height content and repeating Headers and Footers:
(this is the view when I click the browser Print Link/Button in Chrome )
Sample Image

UPDATE 7/2014: Once again Chrome is the bane of my existence with print issues. I saw the comment below about the link that I provided. He's right, it renders correctly but the print view is incorrect. Sorry about that, but it's still a good example to play with to learn the settings.

I am still using this solution, IT DOES work, but you have to adjust the CSS and the JS var for body content size. The sizing combinations are VERY Sensitive, but when you get the page height/width right and the content size right, it does work. I had to write separate functions for paper sizes legal/letter. It's limited but works for our purposes.

I also noticed that depending on my window size it did not not always look right, but the final PRINTED product was as expected with repeating headers and footers, so I used a window that went straight to print so the user didn't notice the output, but rather saw the chrome print rendering. I hate these types of workaround but with everyone in my office using Chrome, it's a necessary evil.

Is there a way to get a web page header/footer printed on every page?

It can be done with tables -- and I know I'm going to risk a downvote by suggesting using tables for layout - but we are talking IE6 here which isn't known for its fantastic CSS support :-)

If you set a CSS style as follows:

thead { display: table-header-group; }
tfoot { display: table-footer-group; }

Then when you create your HTML, render your body as:

<body>
<table>
   <thead><tr><td>Your header goes here</td></tr></thead>
   <tfoot><tr><td>Your footer goes here</td></tr></tfoot>
   <tbody>
     <tr><td>
     Page body in here -- as long as it needs to be
     </td></tr>
   </tbody>
</table>
</body>

Yes it's not good (tables vs CSS), it's not ideal, but (importantly for you) it does work on IE6. I can't comment on Firefox as I've not tested it there, but it should do the job. This will also handle differnt sized pages, differing font sizes, etc. so it should "just work".

If you want the header and footer to appear on printed media only, then use the @media parameters to do the right thing:

@media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}
@media screen {
    thead { display: none; }
    tfoot { display: none; }
}

Note
As of July 2015, this will still only work in Firefox and IE. Webkit-based browsers (cf. Chrome, Safari) have long standing bugs in their issue trackers about this if anyone feels strongly enough to vote on them:

The comments below this question tell me this is now resolved in Chrome. I haven't checked myself :-)

The original bugs against Chrome (for reference) are:

https://bugs.webkit.org/show_bug.cgi?id=17205
https://code.google.com/p/chromium/issues/detail?id=24826
https://code.google.com/p/chromium/issues/detail?id=99124

Print a header for every page in Google Chrome

Yep, that's a Webkit/Chrome thing.
It won't print the thead on each page. FF for instance does.
What you could do to achieve something like this is use page-break.

Page break does only work on block elements, so you should style your tr's accordingly.

Like this:

tr{
    display:block;
}

Now, you should start copying your thead and put it in at every Xth row with javascript:

var head = $('table thead tr');
$( "tbody tr:nth-child(10n+10)" ).after(head.clone());

On screen, you don't want all those heads. Remove them with a media query this (for convenience I added a .head class on my th > tr row.:

@media screen {
    tbody .head{
        display: none;
    }
}

Now before each .head make the page break:

tbody tr.head {
    page-break-before: always;
    page-break-inside: avoid;
}

Check it out overhere: http://jsfiddle.net/jaap/7ZGVv/2/
Keep in mind, jsfiddle doesn't allow you to open just the preview frame, so printing does not work overhere, combine everything in your own file and you'll see the tables will split up, styling is not perfect, and it's not as flexible as your browser itself deciding where to split, but hey, it's something.

Disabling browser print options (headers, footers, margins) from page?

The CSS standard enables some advanced formatting. There is a @page directive in CSS that enables some formatting that applies only to paged media (like paper). See http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.

Downside is that behavior in different browsers is not consistent. Safari still does not support setting printer page margin at all, but all the other major browsers now support it.

With the @page directive, you can specify printer margin of the page (which is not the same as normal CSS margin of an HTML element):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
    @page 
    {
        size:  auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

Note that we basically disables the page-specific margins here to achieve the effect of removing the header and footer, so the margin we set on the body will not be used in page breaks (as commented by Konrad) This means that it will only work properly if the printed content is only one page.

This does not work in Firefox 3.6, IE 7, Safari 5.1.7 or Google Chrome 4.1.

Setting the @page margin does have effect in IE 8, Opera 10, Google Chrome 21 and Firefox 19.

Although the page margins are set correctly for your content in these browsers, the behavior is not ideal in trying to solve the hiding of the header/footer.

This is how it behaves in different browsers:

In Internet Explorer, the margin is actually set to 0mm in the settings for this printing, and if you do Preview you will get 0mm as default, but the user can change it in the preview.

You will see that the page content actually are positioned correctly, but the browser print header and footer is shown with non-transparent background, and so effectively hiding the page content at that position.
In Firefox newer versions, it is positioned correctly, but both the header/footer text and content text is displayed, so it looks like a bad mix of browser header text and your page content.
In Opera, the page content hides the header when using a non-transparent background in the standard css and the header/footer position conflicts with content. Quite good, but looks strange if margin is set to a small value that causes the header to be partially visible. Also the page margin is not set properly.
In Chrome newer versions, the browser header and footer is hidden if the @page margin is set so small that the header/footer position conflicts with content. In my opinion, this is exactly how this should behave.

So the conclusion is that Chrome has the best implementation of this in respect to hiding the header/footer.

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