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

Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
eozzy
  • 66,048
  • 104
  • 272
  • 428

4 Answers4

33

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;
}
Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Pat
  • 25,237
  • 6
  • 71
  • 68
  • The CSS approach seems to work well -- apply them to a print-only stylesheet, **BUT** also add `display: table-row-group` to the main body -- at least in IE, it will repeat on each page. – Blazemonger Sep 24 '12 at 15:50
  • Works in Firefox too, but (as of Sept 2012) still doesn't work in Chrome. – Blazemonger Sep 24 '12 at 15:56
  • 2
    It would seem this is the only solution, and it only works in IE/Firefox. There is no solution, to the best of my knowledge (and research), for Chrome, Safari, or Opera. – SEoF Jan 24 '13 at 16:31
  • 3
    2016 and still no luck with chrome/safari! – Developia Aug 06 '16 at 07:37
  • 3
    __2017__ and still __doesn't work in Chrome!__ _but both methods works in Firefox_ – Mehdi Dehghani Jan 16 '17 at 11:32
  • 2
    Dec-2019: This is an excellent answer, and the table-header-group hack works fine in Chrome as long as you add `page-break-before: avoid;` to the `#header` and `#footer` ... according to https://bugs.chromium.org/p/chromium/issues/detail?id=24826#c42 – troglobit Dec 23 '19 at 13:48
  • The first part, meaning using table works perfectly on Chrome.!! – Don Dilanga May 28 '20 at 08:32
  • what if the table continues two 2-3 pages ? will the footer still be available ? – Bhart Supriya Sep 08 '20 at 04:07
4

I think I arrived too late :), but I was looking for something like this, and I found one answer that helps me (source https://www.youtube.com/watch?v=yDgFLysON98). I wrote the div tag before and after the content like this

<div id="header">Top div content</div>

.
.
.
<div id="footer">Bottom div content</div>

Example:

<!DOCTYPE html>
<html>
<head>``
<style>
body {
    background-color: #CCC;
    margin:48px 0px 0px 64px;
}
div#header {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    color:#CCC;
    background:#333;
    padding:8px;
}
div#footer {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    color:#CCC;
    background:#333;
    padding:8px;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<h1>Page Heading</h1>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<div id="footer">FOOTER</div>
</body>
</html>

... I hope this helps.

Vigneshwar
  • 180
  • 1
  • 9
Oscar Albert
  • 803
  • 8
  • 13
  • 3
    i have tried this approach but footer hiding content inside. Do you have any idea how can we setup page so that it cant be hide any content footer , is there any where do we need to add page-breaks? – macha devendher May 31 '18 at 10:27
1

For that you need to use the mso (microsoft office css properties) in your style:

<style><--
@page 
{
    size:21cm 29.7cmt;
    margin:1cm 1cm 1cm 1cm; 
    mso-title-page:yes;
    mso-page-orientation: portrait;
    mso-header: header;
    mso-footer: footer;
}
@page content {margin: 1cm 1cm 1cm 1cm;}
div.content {page: content;}
</style>
Vincent Teyssier
  • 2,146
  • 5
  • 25
  • 62
0

Nisse Engstroms answer is correct. You just need to put the thead and tfoot content inside a tr to make it work.And it also is the best method because when you use absolute positioning in a div to make header and footer it will always overlap with your main body content on the next page.

    
    <table>
    
    <thead>
    <tr> !-- these are important
    <th id="header"> !--- these are important
        !--- content of header here
    </th>
    </tr>
    </thead>
    
    <tbody>
    <tr>
    <td>
    !---- main body here
    </td>
    </tr>
    </tbody>
    
    <tfoot>
    <tr>
    <th id="footer">
    
        !----- content of footer here
    </th>
    </tr>
        </tfoot>
    
        </table>
Shrey Gupta
  • 31
  • 5