CODEWITHSUNDEEP
htmlcssprinting
hamza
hamza

Reputation: 139

having the header and footer on every print page without override

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:

enter image description here

Upvotes: 0

Views: 1010

Answers (1)

Mahesh-Mayappa Patil
Mahesh-Mayappa Patil

Reputation: 31

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

Upvotes: 1

Related Questions