Print footer on every printed page from website, across all browsers (Chrome)

Question

Dear all, I tried CSS Position: Fixed Property but it does work properly on Firefox and IE(hack for IE6), but it's not working at all for Chrome. I thought Chrome being the latest will support it very easily but still it isn't. I Tried out <thead>,<tfoot><tbody> again works in IE and Firefox, but problematic in Chrome. Please any one have an alternate solution to it.

Hi there. I just ran into this problem, too. Seems like chrome handles the print position:fixed different than all the others. Damn... Will dig deeper into this one. — mtness, May 04 '11 at 15:25

score 18 · Answer 1 · edited Jun 09 '17 at 06:53

It seems like Chrome[webkit] has different way of handling position:fixed in print stylesheets than the rest of the browsers.

So the current answer to this question is:
There is no adequate solution for this in Chrome.

Whereas FF and IE render it on Every page, Opera doesn't show it at all, and webkit browsers only show it on the first page.

small test file:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
     <meta charset="UTF-8">
     <title>print css test by mtness</title>
     <style type="text/css">
     @media print {
      #watermark { 
       display: block;
       position: fixed;
       top: 0;
       right: 0;
       z-index: 5;
      }
    
      p { 
       position: relative;
       top: 40pt;
       display: block;
       page-break-after: always;
       z-index: 0;
      }
     }
     </style>
    </head>
    <body>
     <div id="watermark">AWESOME!</div>
     <p>page1</p>
     <p>page2</p>
     <p>page3</p>
    </body>
    </html>

further resources might be found here:
http://room118solutions.com/2011/03/31/styling-print-headers-and-footers-with-css/
http://css-discuss.incutio.com/wiki/Printing_Headers
http://www.andypemberton.com/css/print-watermarks-with-css/

test page:
http://www.andypemberton.com/sandbox/watermark/

HTH. Kind regards, mtness.

See my answer below for an updated possible solution to this problem, @mtness — lastmjs, Dec 23 '15 at 22:53
[Repeating table headers on printed pages](https://bugs.chromium.org/p/chromium/issues/detail?id=24826) was fixed on Chrome on Jun 5, 2016. I have the version 51.0.2704.103 on Mac OS X and it works. — Ricardo, Jul 05 '16 at 19:25

score 5 · Answer 2 · edited Jun 08 '18 at 23:01

5

Edit: Apparently the bug has been fixed, so the library I share below may not be of much use anymore.

From all of my research, it is correct that there is no way to get position: fixed to work in Chrome. Here is a link to the bug on the Chromium project page.

In the meantime, I have created this open-source project that allows you to print headers and footers in Chrome. It is early in development but it works, depending on the structure of your HTML layout:

It is a work-in-progress, and it relies heavily on the CSS Regions Polyfill. But I am using the techniques in this library to very good effect on a project at work.

edited Jun 08 '18 at 23:01

Sᴀᴍ Onᴇᴌᴀ

8,218
8
36
58

answered Dec 23 '15 at 22:52

lastmjs

924
3
11
22

It was fixed for a while, it seems to again be broken... at least in Android's webview. Very strange. – fattire Feb 28 '17 at 21:43
In Chrome i always get "Uncaught (in promise) TypeError: document.getNamedFlow is not a function" even in your examples – Ruwen May 23 '17 at 11:18

score 0 · Answer 3 · answered Aug 10 '17 at 19:22

I accomplished that using tables, but only for headers in chrome. I placed the repeating content on thead tag and the page content in tbody, so the browser interpreted correct.

However, I have encountered a bug in large contents HTML. In some cases, the content overlapped the header. In the date that I'm posting this, still not found a solution.

When printing tables in Google Chrome, content overlaps header

score 0 · Answer 4 · answered Aug 29 '18 at 11:57

      thead.report-header {
   display: table-header-group;
}

tfoot.report_footer_Mh {
   display:table-footer-group;

}

   tabel.report-container {
    page-break-after: always;
}

<table class="report-container"  cellpadding="4" cellspacing="0" width="790" align="center" background="" style="word-break: break-word">
  
  <!-- place the header part here-->
  <thead class="report_header_Mh">
    <tr>
      <th class="report_header_cell_Mh"> 
        <div class="header_info_Mh">
          
        </div>
      </th>
    </tr>
  </thead>
  <!-- Header Ends here--> 
  
  <!-- Place the Main Content here-->
  <tbody class="report_content_Mh">
    <tr>
      <td class="report_content-cell_Mh">
      <div class="main_Mh">
       
      </div>
      </td>
    </tr>
  </tbody>
  <!-- Main Content ends here--> 
  
  <!--Place Footer content here-->
  <tfoot class="report_footer_Mh">
    <tr>
      <td class="report_footer-cell_Mh">
         <div class="footer_info_Mh">
          
        </div>
        </td>
    </tr>
  </tfoot>
  <!-- Footer Ends here-->
</table>

  

It worked for me try this way

Surrounding your code with an explanation would seriously improve your answer. — zx485, Aug 29 '18 at 18:54
Your answer should be accompanied by some detail regarding how and why this works. — Brandon Durham, Aug 29 '18 at 20:12

score -10 · Accepted Answer · answered Aug 15 '12 at 05:13

-10

This is the code i use. Note I am setting both html and body height to 100%.

@media print {
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #footer {
    position: absolute;
    bottom: 0;
  }
}

answered Aug 15 '12 at 05:13

tim

2,530
3
26
45

4

This does not solve the problem at all. It will make the footer be printed on the last page only. It even brakes it in the browsers that worked with position fixed. – Nicu Surdu Apr 18 '14 at 10:26

Print footer on every printed page from website, across all browsers (Chrome)

5 Answers5

Linked