skip to Main Content

I have this html file, that I’m using to generate a pdf with a header and footer on every page, but after the first header, the main content overlaps with the footer and the header. How do i solve this?

<html>
        <head>
          <style>
            @page {
              size: A4;
            }
            body {
              margin: 0;
              padding: 0;
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
            }
            /* Apply the header to every page */
            #header {
              font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
              color: #111111;
              font-size: 16px;
              text-align: left;
              position: relative;
              top: 0;
              left: 0;
              right: 0;
              height: 40mm; /* Adjust the height of the header */
              break-after: always;
            }
            /* Apply the footer to every page */
            #footer {
              font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
              color: #111111;
              font-size: 16px;
              text-align: left;
              position: fixed;
              bottom: 0;
              left: 0;
              right: 0;
              height: 40mm; /* Adjust the height of the footer */
              break-after: always;
              background-color: white;
            }
            /* Create a wrapper for the main content to offset for header and footer */
            #main-content-wrapper {
              flex: 1;
              padding-bottom: 40mm; /* Add the height of the footer */
              box-sizing: border-box;
            }
          </style>
          
        </head>
        <body>
          <div id="header">${headerWithData}</div>
          <div id="main-content-wrapper">
             <div id="main-content">${template}</div>
          </div>
          <div id="footer">${footerWithData}</div>
        </body>
      </html>

I tried adding page breaks to the footer but it didn’t work.

2

Answers


  1. <html>
      <head>
        <style>
          @page {
            size: A4;
          }
    
          body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
          }
          /* Apply the header to every page */
    
          #header {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #111111;
            font-size: 16px;
            text-align: left;
            height: 40mm;
            position: fixed;
            width: 100%;
            /* Adjust the height of the header */
            break-after: always;
    
            background: red;
          }
          /* Apply the footer to every page */
    
          #footer {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #111111;
            font-size: 16px;
            text-align: left;
            height: 40mm;
            position: fixed;
            bottom: 0;
            width: 100%;
            /* Adjust the height of the footer */
            break-after: always;
            background-color: white;
    
            background: blue;
          }
          /* Create a wrapper for the main content to offset for header and footer */
    
          #main-content-wrapper {
            padding-top: 40mm;
            padding-bottom: 40mm;
            /* Add the height of the footer */
            box-sizing: border-box;
    
            background: green;
          }
        </style>
      </head>
    
      <body>
        <div id="header">${headerWithData}</div>
        <div id="main-content-wrapper">
          <div id="main-content">
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template template template template template template template template template template
            template template template
          </div>
        </div>
        <div id="footer">${footerWithData}</div>
      </body>
    </html>

    Try above code, seems to works for me.

    The key is to make both header and footer position: fixed, see How to use HTML to print header and footer on every printed page of a document? for details.

    print results screenshot

    Login or Signup to reply.
  2. Try playing with the margin on the

    @page {
       size: A4;
       margin: 60pt 0;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search