0

I want to repeat header and footer with position fixed. but the content overlaps above the header and footer. I want the content to be in the middle of header and footer. i have try many solution but still have issue with overlap content. @page margin also doesn't work because it also affects header and footer. please help me!

Code :

 window.print();
 
@media screen {
   .PrintOnly {display: none;}
    b {
        font-weight:bold;display: inline-block !important;}


strong {
        font-weight:bold;display: inline-block !important;}
}
@media print {
    
    @page{ margin:0;
  size: A4; }
  .margin-print {
    
    margin: 151px 94.5px 151px 94.5px;
  padding-top: 80px; /* Add enough padding to offset the header */
  padding-bottom: 40px; /* Add enough padding to offset the footer */
  }


   .PrintOnly {
    font-size: 10pt;   overflow-x: hidden;
    
    overflow-y: hidden; font-family:'Noto Sans' !important;
      }
    b {
        font-weight:bold;display: inline-block !important;
    }

    .image-footer {  position:fixed;
  background: #2658C9;
    bottom:0px;
    left:0px;
    width:100%;
    padding:8px;
  z-index: -99; }
    
    .image-header {  position:fixed;
  background: #2658C9;
  top: 0;
    left:0px;
    width:100%;
    padding:8px;
  z-index: -99;}
 
}
<!DOCTYPE html>
<html lang="en">  <style>
</style>
<head>
     
</head>
<div class="PrintOnly" >
    <br>
<img  class ='image-header' src='../../image.png'>
    <div class='margin-print'>

<p>Content</p>
<br>
</div>
<img class ='image-footer' src='../../image.png'>

</div>

Image : enter image description here

Anis Septi Budiani
  • 13
  • 4
  • There’s lots of attempts at answers at https://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document Are any of the more modern ones useful to you? – A Haworth Jul 21 '23 at 06:18
  • @AHaworth I have already used position: fixed; as the above answer suggested. However, I am still confused when it comes to the next page. The text overlaps with the header and footer. The margin only applies to the first page. I want to keep the content between the header and footer. Is there any solution, or do I need to use something other than windows.print()? – Anis Septi Budiani Jul 25 '23 at 01:21

0 Answers0