Question

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

我基本上是这样的：

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

但是，当正文内容太大时，它与页脚重叠，而我找不到解决方法。
我尝试了@page { margin-bottom: 100pt; }，但是它也抬高了页脚，填充无效，position: running什么也没做（我找不到任何浏览器是否支持它）。

解决此问题的条件是：

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

Answer 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>，以使身体部位不会与页脚重叠。

希望这会有所帮助。

Answer 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>

如何在正文不重叠的情况下在每个页面上打印HTML页脚？

2 个答案: