0

I want to print html page with footer on every page, the data is loaded dynamically.

The problem is, the content of page overlaps the footer. I know this happens because I am using position:fixed on the footer.

Here is my css.

@media print {
  page[size="A4"] {  
  width: 21cm;
  height: 28.7cm; 
  padding: 0 0 0 0;
  page-break-before: always;
  }

.print {display : block;}

footer {
    position: fixed;
    bottom: 0;
  } 

}

@page {
  margin-bottom: 0.3cm;
}

Html code

<body>
  <button class="print">Print</button>
   <page>
     <p>Some very long text here.</p>
   </page>
  <footer>
     <img scr="img/contact.jpg"></img>
  </footer>
 </body>

Is it possible to add padding @page so that footer dose not over lap the content?

Thank you.

user2738563
  • 13
  • 4
  • why don't you add padding to your Print media query ? –  Jun 26 '17 at 16:19
  • Why not use position relative to footer so that content pushes it down ? – mikepa88 Jun 26 '17 at 16:20
  • @PooyaRaki adding padding to Print media query only effects single page. If the content is more than one page footer overlaps content. – user2738563 Jun 26 '17 at 16:55
  • @mikepa88 I want to dispaly footer on every page. If I use position relative, then footer will be visible on the last page only. – user2738563 Jun 26 '17 at 16:58
  • can you show the html and extended css ? – mikepa88 Jun 26 '17 at 17:05
  • @mikepa88 I have updated with my Html, there is not much much extended css. – user2738563 Jun 26 '17 at 17:52
  • Have you seen this? https://stackoverflow.com/questions/8356881/print-header-footer-on-all-pages-print-mode Doesn't work on chrome I think, but it's something. The thing is, css styling for printing is not well supported and inconsistent between browsers. – mikepa88 Jun 27 '17 at 11:12

0 Answers0