skip to Main Content

I am trying to create a footer that get repeated on every printed page (size A4) without overlaping the contet of the page. I tried many varaions either the footer does not stick to bottom and follows the content or it overlaps the content.

<style>
  @media print {
    #footer {
      position: fixed;
      bottom:0;
      color: black;
    }

  }
</style>

    <table style="width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact">
        <thead style = "display: table-header-group;">
            <tr>
                <td>
                  Header
                </td>
            </tr>
        </thead>

        <tbody style="padding: 20px">
          <tr><td>
          <div class="content">
            <h1>Page Content</h1>
            <div id="lines-container"></div>
        
            <script>
              // Get the lines container element
              var linesContainer = document.getElementById("lines-container");
          
              // Generate 40 lines
              for (var i = 0; i < 80; i++) {
                var line = document.createElement("div");
                line.textContent = "Line " + (i + 1);
                linesContainer.appendChild(line);
              }
            </script>
          </div>
        </td></tr>

        </tbody>

        <tfoot id="footer">
            <tr>
              <td colspan="99" style="border-top: solid 2px #9fdba9;" >
                 <table>
                       <tr>
                        <td  colspan="99" style="vertical-align: middle;">
                            <img src="http://127.0.0.1:5566/view-attachment?N0b3J5" alt="SVG Image"
                            style="width: 100px; height: 75px; padding: 2px; padding-right: 20px;">
                        </td>
                        <td style="vertical-align: middle; text-align: left; padding: 2;">
                            <div>Address: </div>
                            <div>Tel:  </div>
                        </td>
                        <td style="vertical-align: middle; text-align: left; padding: 2;">
                            <div> Email: </div>
                            <div> Website:  </div>   
                        </td>
                      </tr>   
                  </table>
               </td>
            </tr>   
        </tfoot>
</table>

My issuse is the footer overlapaing the content when I hit Ctrl + P to print it.

2

Answers


  1. You can try position: sticky instead of position: fixed.

    Edit
    I find some another solution using one tfoot as invisible space. You can check this below.

    #footer,
    #footer-space {
        height: 50px;
    
    }
    
    #footer {
        position: fixed;
        bottom: 0;
    }
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css" />
    </head>
    
    <body>
    
      <button type="button" onClick="window.print()">
        PRINT ME!
      </button>
    
      <table style="width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact">
        <thead style="display: table-header-group;">
          <tr>
            <td>
              Header
            </td>
          </tr>
        </thead>
    
        <tbody style="padding: 20px">
          <tr>
            <td>
              <div class="content">
                <h1>Page Content</h1>
                <div id="lines-container"></div>
    
                <script>
                  // Get the lines container element
                  var linesContainer = document.getElementById("lines-container");
    
                  // Generate 40 lines
                  for (var i = 0; i < 80; i++) {
                    var line = document.createElement("div");
                    line.textContent = "Line " + (i + 1);
                    linesContainer.appendChild(line);
                  }
                </script>
              </div>
            </td>
          </tr>
    
        </tbody>
    
        <tfoot>
          <tr>
            <td>
              <!--place holder for the fixed-position footer-->
              <div id="footer-space"></div>
            </td>
          </tr>
        </tfoot>
    
        <tfoot id="footer">
          <tr>
            <td colspan="99" style="border-top: solid 2px #9fdba9;">
              <table>
                <tr>
                  <td colspan="99" style="vertical-align: middle;">
                    <img src="http://127.0.0.1:5566/view-attachment?N0b3J5" alt="SVG Image"
                      style="width: 100px; height: 75px; padding: 2px; padding-right: 20px;">
                  </td>
                  <td style="vertical-align: middle; text-align: left; padding: 2;">
                    <div>Address: </div>
                    <div>Tel: </div>
                  </td>
                  <td style="vertical-align: middle; text-align: left; padding: 2;">
                    <div> Email: </div>
                    <div> Website: </div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </tfoot>
      </table>
    
    </body>
    
    </html>
    Login or Signup to reply.
  2. I tried everything but didn’t work so I edited your script and added <div id="lines-container-2"></div> and gave it margin-top:60px; that you can check the result in ctrl+p

      @media print {
        #footer {
          position: fixed;
          bottom:0;
          color: black;
        }
        #lines-container {
          height:790px;
          overflow: hidden;
        }
        #lines-container-2 {
          height:790px;
          overflow: hidden;
          margin-top:60px;
        }
      }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="White.css">
        <title>Document</title>
    </head>
    <body>
        <table style="width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact">
            <thead style = "display: table-header-group;">
                <tr>
                    <td>
                      Header
                    </td>
                </tr>
            </thead>
    
            <tbody style="padding: 20px">
              <tr><td>
              <div class="content">
                <h1>Page Content</h1>
                <div id="lines-container"></div>
                <div id="lines-container-2"></div>
                <script>
                  // Get the lines container element
                  var linesContainer = document.getElementById("lines-container");
              
                  // Generate 40 lines
                  for (var i = 0; i < 44; i++) {
                    var line = document.createElement("div");
                    line.textContent = "Line " + (i + 1);
                    linesContainer.appendChild(line);
                  }
                  // Get the lines container element
                  var linesContainer = document.getElementById("lines-container-2");
              
                  // Generate 40 lines
                  for (var i = 44; i < 80; i++) {
                    var line = document.createElement("div");
                    line.textContent = "Line " + (i + 1);
                    linesContainer.appendChild(line);
                  }
                </script>
              </div>
            </td></tr>
    
            </tbody>
    
            <tfoot id="footer">
                <tr>
                  <td colspan="99" style="border-top: solid 2px #9fdba9;" >
                     <table>
                           <tr>
                            <td  colspan="99" style="vertical-align: middle;">
                                <img src="http://127.0.0.1:5566/view-attachment?N0b3J5" alt="SVG Image"
                                style="width: 100px; height: 75px; padding: 2px; padding-right: 20px;">
                            </td>
                            <td style="vertical-align: middle; text-align: left; padding: 2;">
                                <div>Address: </div>
                                <div>Tel:  </div>
                            </td>
                            <td style="vertical-align: middle; text-align: left; padding: 2;">
                                <div> Email: </div>
                                <div> Website:  </div>   
                            </td>
                          </tr>   
                      </table>
                   </td>
                </tr>   
            </tfoot>
    </table>
    
    </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search