PDF with multiple pages: header overlaps with content

Self-Hosted | v5
1

I’m customizing quote and invoice design.

When I set content in header and footer tab, and the product table extends to more than one page, header and footer overlap with content body in second pages.

This is my code for header tab:

<div class="repeating-header" id="header">
    <div class="header-moto"><h2>DAMOS FORMA A TUS PROYECTOS</h2></div>
   <div class="header-container">
      <div class="company-logo-container header-column">
         <img class="company-logo" src="$company.logo" alt="$company.name logo" />
      </div>
      <div id="company-details" class="header-column"></div>
      <div id="company-address" class="header-column"></div>
   </div>
</div>

This is body tab:

<div id="body">
   <p class="entity-label">$entity_label</p>
   <div class="client-and-entity-wrapper">
       <div>
           <table id="entity-details" cellspacing="0" dir="$dir"></table>
       </div>
       <div id="client-details"></div>
       <div id="vendor-details"></div>
   </div>
   <table id="product-table" cellspacing="0" data-ref="table"></table>
   <table id="task-table" cellspacing="0" data-ref="table"></table>
   <table id="delivery-note-table" cellspacing="0" data-ref="table"></table>
   <table id="statement-invoice-table" cellspacing="0" data-ref="table"></table>
   <div id="statement-invoice-table-totals" data-ref="statement-totals"></div>
   <table id="statement-payment-table" cellspacing="0" data-ref="table"></table>
   <div id="statement-payment-table-totals" data-ref="statement-totals"></div>
   <table id="statement-aging-table" cellspacing="0" data-ref="table"></table>
   <div id="statement-aging-table-totals" data-ref="statement-totals"></div>
   <div id="table-totals" cellspacing="0"></div>
</div>

And this is my CSS (include tab), I put only the relevant part:

<style id="style">
    @import url($font_url);

    :root {
        --primary-color: $primary_color;
        --secondary-color: $secondary_color;
        --line-height: 1.6;
    }

    html {
        width: 210mm;
        height: 200mm;     
    }

    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: $font_name, Helvetica, sans-serif;
        font-size: "$font_size";
        zoom: 80%;
    }

    @page {
        margin-left: $global_margin;
        margin-right: $global_margin;
        margin-top: 5;
        margin-bottom: 0;
        size: $page_size $page_layout;
    }
   .header-container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }

    .header-container .header-column{padding: 20px 0;}

    .header-moto h2{
        text-align: center;
        font-weight: bold;
        color: #10679d;
    }

    .company-logo {
        max-width: 65%;
        /*        max-width: $company_logo_size;*/
    }

    #header{height: 170px;}
    #body{margin-top: 170px;}

    .client-and-entity-wrapper {
        margin-top: 170px;
        display: flex;
        justify-content: space-between;
        padding: 1rem;
        border-top: 1px solid #d8d8d8;
        border-bottom: 1px solid #d8d8d8;
    }
2

Hi,

@david do you have any suggestions?

3

@nzurita

You’ll want to start with a design (Bold / Modern) that has been preconfigured with repeating headers. This will show you how to create the design for reliable margins.