如何在每个页面上打印 HTML 页脚而不使正文重叠？答案

【问题标题】：How to print a HTML footer on every page without the body overlapping?如何在每个页面上打印 HTML 页脚而不使正文重叠？
【发布时间】：2018-11-16 17:28:47
【问题描述】：

我正在尝试让我的 HTML 的页脚出现在每个打印的页面上，而正文内容不会与页脚重叠。

我所拥有的基本上是这样的：

<style>
    footer {
        position: fixed;
        bottom: 5pt;
        height: 100pt;
    }
</style>
<div>
    content...
</div>
<footer>
    footer
</footer>

但是当正文内容太大时，它会与页脚重叠，我找不到解决办法。
我尝试了@page { margin-bottom: 100pt; }，但它也将页脚向上推，填充不起作用，position: running 什么也没做（我找不到任何浏览器是否支持它）。

解决这个问题的必要条件是：

页脚需要出现在打印的每一页上；
页脚内容不能与页面的其余部分重叠；

【问题讨论】：

position: running 到底是什么？
为什么不在<div>的内容上加上padding-bottom: 100pt;？
@BSK 仅适用于最后一页（padding-bottom 从结束 div 标记开始），但我需要页脚出现在每一页上。
@dmikester1 w3.org/TR/css-gcpm-3/#running-syntax

标签： html css

【解决方案1】：

footer {
        position: fixed;
        bottom: 5pt;
        height: 100pt;
        z-index:1000;
    }

<html>
  <head>
    <title> Page Title </title>
  </head>
  
  <body>
  
    <div>
        content...
    </div>
    <footer>
        footer
    </footer>
  </body>
  
</html>

将z-index 用于您的<footer>，这样您的身体部位就不会与您的页脚重叠。

希望这会有所帮助。

【讨论】：

感谢@bhavin-shah，但这只会让页脚出现在内容的前面。
那么我认为通常你会给内容 div 一个底部或者可能是 100pt 的 margin-bottom，这样它就可以到页脚的顶部。

【解决方案2】：

您可以使用 CSS calc() 函数通过从窗口高度减去页脚高度来计算正文的适当高度。使用这种方法，两个元素不会重叠，它们的位置可以保持相对，并且在调整窗口大小时会自动重新计算高度，因此您的页脚将始终保持在底部。

.content {
  overflow: auto;
  height: calc(100vh - 50px); /* window height - footer height */
  padding: 0 20px;
  background-color: gray;
}

.block {
  height: 100px;
  margin-bottom: 20px;
  background-color: white;
}

footer {
  height: 50px;
  width: 100%;
  background-color: green;
}

<div class='content'>
  <span>body</span>
  
  <div class='block'></div>
  <div class='block'></div>
  <div class='block'></div>
</div>

<footer>
  <span>footer</span>
</footer>

【讨论】：

我试过了，但是没有用。我不知道文档会有多少页，因为它是用于打印的，所以我不能使用 vh 作为单位。如果我可以做一个@page { margin-bottom: 100pt; } 但从该规则中排除页脚（@page *:not('footer') {... 不起作用）