Html - How to create a footer that stays at the bottom of the print screen?

Bahar
June 13, 2023
143 views
1 vote
2 Answers

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.

Answers

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to create a footer that stays at the bottom of the print screen?

Answers