Chrome最新版本position:fixed+bottom:0打印定位异常问题求助

问题现象 #

• Chrome 117.0.5938.92（Mac OS）打印页面时，设置了position: fixed的页脚无法固定在页面底部，出现向上偏移
• Chrome 116.0.5845.187及其他浏览器（如Firefox、Safari）打印功能完全正常

问题复现代码 #

CSS代码 #

/* Styles go here */

.page-header,
.page-header-space {
  height: 100px;
}

.page-footer,
.page-footer-space {
  height: 50px;
}

.page-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid black; /* 演示用 */
  background: yellow; /* 演示用 */
}

.page-header {
  position: fixed;
  top: 0mm;
  width: 100%;
  border-bottom: 1px solid black; /* 演示用 */
  background: yellow; /* 演示用 */
}

.page {
  page-break-after: always;
}

@page {
  margin: 20mm;
}

@media print {
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }

  button {
    display: none;
  }

  body {
    margin: 0;
  }
}
/* 注意：原代码末尾的`:picture-in-picture ;`是无效规则，建议移除 */

HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div class="page-header" style="text-align: center">
      I'm The Header
      <br />
      <button type="button" onClick="window.print()" style="background: pink">
        PRINT ME!
      </button>
    </div>

    <div class="page-footer">I'm The Footer</div>

    <table>
      <thead>
        <tr>
          <td>
            <!-- 固定表头占位符 -->
            <div class="page-header-space"></div>
          </td>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <!-- 内容区域 -->
            <div class="page">PAGE 1</div>
            <div class="page">PAGE 2</div>
            <div class="page" style="line-height: 3">
              PAGE 3 - Long Content
              <br />
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
              tincidunt metus eu consectetur rutrum. Praesent tempor facilisis
              dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia
              non odio et condimentum. Aenean faucibus cursus mi, sed interdum
              turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros,
              posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse
              ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi.
              Pellentesque faucibus nisl et dolor pharetra, vel mattis massa
              venenatis. Integer congue condimentum nisi, sed tincidunt velit
              tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent
              consectetur volutpat nibh, quis pulvinar est volutpat id. Cras
              maximus odio posuere suscipit venenatis. Donec rhoncus scelerisque
              metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor
              id urna vel, volutpat blandit velit. Cras sit amet sem eros.
              Quisque commodo facilisis tristique. Proin pellentesque sodales
              rutrum. Vestibulum purus neque, congue vel dapibus in, venenatis
              ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae
              lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc
              interdum, sed facilisis ex pellentesque.
            </div>
          </td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>
            <!-- 固定表脚占位符 -->
            <div class="page-footer-space"></div>
          </td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

问题截图 #

• Chrome 117异常效果：
• Chrome 116正常效果：

修复方案 #

方案1：手动适配@page的margin调整定位 #

Chrome 117修改了打印时fixed元素的定位逻辑，不再自动适配@page设置的margin值，需要手动对齐：

修改.page-footer的CSS样式：

.page-footer {
  position: fixed;
  bottom: 20mm; /* 与@page的margin-bottom值一致 */
  width: calc(100% - 40mm); /* 减去@page左右margin的总和（20mm*2） */
  border-top: 1px solid black;
  background: yellow;
}

@media print {
  /* 打印媒体查询中重复设置，确保优先级 */
  .page-footer {
    position: fixed;
    bottom: 20mm;
    width: calc(100% - 40mm);
  }
}

同时移除原代码末尾的无效规则:picture-in-picture ;。

方案2：改用表格tfoot实现页脚（更稳定） #

如果fixed定位的兼容性问题持续存在，可以放弃fixed，完全依赖表格的tfoot来实现每页显示的页脚：

1. 修改CSS：

@media print {
  tfoot {
    display: table-footer-group;
    height: 50px;
  }
  .page-footer-space {
    display: none;
  }
  .page-footer {
    display: none; /* 隐藏原fixed页脚 */
  }
}

2. 修改HTML：
   将tfoot中的占位符替换为实际页脚内容：

<tfoot>
  <tr>
    <td>
      <div style="border-top:1px solid black; background:yellow;">I'm The Footer</div>
    </td>
  </tr>
</tfoot>

然后移除页面中的<div class="page-footer">I'm The Footer</div>。

原因说明 #

Chrome 117在打印渲染引擎上做了调整，对position: fixed元素的定位计算不再包含@page的margin值，导致原本依赖浏览器自动适配的fixed元素出现偏移。手动设置对应的bottom和width值，或者改用表格原生的页脚组，都可以解决这个问题。

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