@media print -- how do I avoid the overlap and keep the header fixed for all the pages at top?

Question

how should I avoid the overlap? and need the header always on top every page... any help will be highly appreciated. below please find the code I have written

@media print {
    
    body {
        page-break-inside: avoid;
        width:100%;
        height:100%;
    }
   
    
    .header {
        position: fixed;
        top: 0;
        border: 2px solid red;
        
    }
    
     /* .header {
        position: fixed;
        height:100px;
        top: 0;
        width:100%;
    } */
    div.break-page1 {
      page-break-after: always;
    }
    @page {
        size: landscape;
        margin: 5mm 5mm 15mm 5mm;  
    } 
    
    .psi-table thead th{
        background-color: #E5F4FA !important;
        -webkit-print-color-adjust: exact; 
        page-break-inside: avoid;
    }
    .psi-table tbody tr{
        page-break-inside: avoid;
    }
    .psi-table tbody tr td{
        padding:4px !important;
    }
    .border-psi,
    .psi-table{
        border: 1px solid #a5a5a5;
        border-radius: 5px;
    }
    
    .bg-charges{
        background: #F2F3F5 0% 0% no-repeat padding-box;
    }
    .bank-details{
        background: #F2F3F5 0% 0% no-repeat padding-box;
        border-radius: 5px;
        padding:8px;
    }
}

Does the header have a fixed height? Then maybe try to add a padding-top to the body? — GreyRoofPigeon, Jul 29 '22 at 08:40
You might want to do that, so you can add a top padding. Or choose to only once show the header on the first page... — GreyRoofPigeon, Jul 29 '22 at 08:43
if I need to show for 1st page, I'm able to do that but need to show the header for all the pages... — Avilash Chak, Jul 29 '22 at 08:45
`position: fixed` should already see to it, that the header gets repeated on every page, and that all elements in normal flow do not get overlapped by it. _Is_ the rest of the content in normal flow, or is that perhaps somehow positioned fixed or absolute itself? — CBroe, Jul 29 '22 at 08:46
In @media print {, you can set the content style is margin-top: header height — Đỗ văn Thắng, Jul 29 '22 at 08:46
Example

. Then you can: @media print { .content {margin-top: 200px} } — Đỗ văn Thắng, Jul 29 '22 at 08:53
@LinkinTED by using padding top for the 1st page it's fine but 2nd page it's overlapping the contents.. — Avilash Chak, Jul 29 '22 at 09:01
yes but not for the second page... in second page the header is overlapping the contents — Avilash Chak, Jul 29 '22 at 09:04
Does this answer your question? [Set margin/padding for each page to print (html/css)?](https://stackoverflow.com/questions/41778117/set-margin-padding-for-each-page-to-print-html-css) — GreyRoofPigeon, Jul 29 '22 at 12:52

@media print -- how do I avoid the overlap and keep the header fixed for all the pages at top?

0 Answers0