如何创建打印时固定在底部且不重叠内容的A4页脚？

核心问题说明 #

你当前用position: fixed固定页脚的方式会让它脱离文档流，导致和正文内容重叠；而HTML表格的tfoot本身支持通过CSS设置为每页重复显示，不需要依赖fixed定位。

修正后的完整代码 #

<style>
  /* 配置A4打印页面的边距，为页脚预留足够空间 */
  @page {
    size: A4;
    /* 根据页脚实际高度调整底部边距，这里预留110px（页脚约100px+10px缓冲） */
    margin: 2cm 1cm 110px 1cm;
  }

  @media print {
    /* 让tfoot在每一页自动重复显示 */
    #footer {
      display: table-footer-group;
      color: black;
    }

    /* 给正文容器添加上下内边距，避免和页眉/页脚挤在一起 */
    .content {
      padding: 10px 0;
    }

    /* 清除默认边距干扰 */
    body {
      margin: 0;
      padding: 0;
    }
  }
</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>
      <tr><td>
      <div class="content">
        <h1>Page Content</h1>
        <div id="lines-container"></div>
    
        <script>
          var linesContainer = document.getElementById("lines-container");
          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: 2px;">
                        <div>Address: </div>
                        <div>Tel:  </div>
                    </td>
                    <td style="vertical-align: middle; text-align: left; padding: 2px;">
                        <div> Email: </div>
                        <div> Website:  </div>   
                    </td>
                  </tr>   
              </table>
           </td>
        </tr>   
    </tfoot>
</table>

关键调整细节 #

• 用@page规则定义A4尺寸和底部边距，从根源上避免正文内容延伸到页脚区域
• 给tfoot设置display: table-footer-group，这是CSS打印的原生特性，自动实现页脚每页重复
• 移除position: fixed，让页脚回到文档流中，彻底解决重叠问题
• 调整正文容器的内边距，优化整体排版美观度

内容的提问来源于stack exchange，提问作者Bahar