having the header and footer on every print page without override

Question

I want to have the header and footer on every print page without override, this is my css code:

@media print {
  footer {
    position: fixed;
    bottom: 0;
    top: auto;
    display: block;
    text - align: center;
    width: 100 %;
  }
  #header {
    display: block;
    position: fixed;
    top: 0;
    bottom: auto;
    text - align: center;
    width: 100 %;
  }
  #header div.col - 6 {
    width: 50 %;
    float: left;
  }
  section.container - fluid {
    position: relative;
    page - break -inside: avoid;
  }
  section.container - fluid: before,
  section.container - fluid: after {
    display: block;
    content: "";
    margin - top: 100 px;
    margin - bottom: 100 px;
  }
}

I am using windows.print().

This a picture of the problem:

Possible duplicate of [How to use HTML to print header and footer on every printed page of a document?](https://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document) — Serg Chernata, Sep 26 '18 at 19:16

score 1 · Answer 1 · edited Feb 18 '19 at 05:42

1

 @page {
    size: A4; 
    margin-top: 2cm;
    margin-bottom: 2cm;
 }

Also you can manage your print first page by using below hack

@page:first {
   margin: 0 0 0 0
}

edited Feb 18 '19 at 05:42

slfan

8,950
115
65
78

answered Feb 18 '19 at 05:23

Mahesh-Mayappa Patil

31
2

having the header and footer on every print page without override

1 Answers1