How to make the header and footer without repeating in print for N pages?

Question

I'm struggling to repeat the header and footer on each print page. No problem necessarily be a table, most like it was, someone has any idea how to do? And i dont know how many pages it will be, can be n pages.

TRY: jsfiddle.net/7ZGVv/111

I found no code to do this, the closer I saw was this: http://jsfiddle.net/7ZGVv/111/ .But can not repeat the header nor footer. — Danilo Pádua, Aug 25 '16 at 17:02
Possible duplicate of [How to use HTML to print header and footer on every printed page of a document with 5 pages?](http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document-w) — Adam Buchanan Smith, Aug 25 '16 at 17:21
@PedroFranco see my answer below, please explain how this does not work? — Adam Buchanan Smith, Aug 25 '16 at 18:26

Adam Buchanan Smith · Accepted Answer · 2016-08-25T18:47:08.910

Well since no-one seems to think it is a dup, I will post the code here to prove it. See a working example here http://a-b-smith.com/

html

<h1>test 1</h1>
<h1>test 2</h1>
<h1>test 3</h1>
<h1>test 4</h1>
<h1>test 5</h1>
<h1>test 6</h1>
<div class="divFooter">
<h1>Footer</h1>
</div>
<div class="divHeader">
<h1>Header</h1>
</div>

CSS note I added a page break in between each of the <h1> to simulate multiple pages

@media print {
  h1 {
    page-break-after: always;
  }
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
  div.divHeader {
    position: fixed;
    top: 0;
  }
  body > h1 {margin-top: 100px;}
}

@media screen {
  div.divFooter, div.divHeader {
    display: none;
  }
}

score 1 · Answer 2 · edited May 23 '17 at 11:51

1

HTML and CSS have no support for printing page header and footers in print. You may be able to simulate it with:

tables
fixed position blocks

This solution have each bug and caveat in different browser.

See : How to use HTML to print header and footer on every printed page of a document?

edited May 23 '17 at 11:51

Community

1
1

answered Aug 25 '16 at 17:11

Gerald Chablowski

462
2
7

How to make the header and footer without repeating in print for N pages?

2 Answers2