HTML 主标签和页脚标签无法在 PDF 中正确呈现

Question

我有一个由一系列 div 组成的 html 文档（见下文）；每个 div 都有一个

page-break-after-always

类，用于在呈现为 PDF 时将所需内容分组到每个页面。

内容类只是将主要元素放在其父元素的中心，我有一个页脚元素样式，因此它粘在其父元素的底部。

我的标记：

<div class="page-break-after-always relative">

  <main class="content"> 
    /* content */
  </main>

  <footer class="bottom">
   content which spans the full width
  </footer>
</div>

<div class="page-break-after-always">
   /* same as above */
</div>

CSS：

  .page-break-after-always { 
    page-break-after: always; 
    height: auto 
  }
    
  .relative {
    position: relative;
  }

   .bottom {
    position: relative;
    bottom: 0;
    width: 100%;
  }
 

尽管内容未居中呈现时会发生什么AND页脚不粘在底部，这与显示页脚粘在底部的开发工具相反。看我的图片，内容偏离中心，你可以看到页脚上方距离底部有多远。

是否有一些 PDF 的 CSS 可以解决这个问题？