CSS：在每一页上打印页脚答案

【问题标题】：CSS: Printing footer on every pageCSS：在每一页上打印页脚
【发布时间】：2017-10-22 02:44:29
【问题描述】：

我想在我拥有的每一页上打印页脚。页脚上方 div 中的文本内容是动态的，所以我不知道它的大小。我的页脚有固定的位置，所以它会在每一页上重复。我的问题是内容溢出了页脚。

@media print {
  @page {
    size: A4;
    margin: 2cm;
  }
  body {
    position: relative;
  }
  html,
  body {
    margin: 0cm !important;
    width: 210mm;
    height: 100%;
  }
  footer {
    display: inline-block;
    position: fixed;
    vertical-align: bottom;
    width: 100%;
    bottom: 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Sample text</title>
</head>

<body>
  <div>... very very long text over 10 pages or so ...</div>

  <!-- footer which must be on every page -->
  <footer class="big-footer">
    <img src="/images/country/cs/logo-pdf.png" class="footer-logo">
    <div class="footer-text__block">
      <span>Osobní výživový plán dle metabolické diagnostiky KNT</span>
      <br>
      <span>pro klienta: <strong>Michal Lokšík</strong></span>
      <br><br>
      <span class="site">http://www.svet-zdravi.cz</span>
    </div>
  </footer>
</body>

</html>

screenshot here

【问题讨论】：

Is there a way to get a web page header/footer printed on every page?的可能重复
将height 设置为页脚并将padding-bottom 添加到页面以匹配页脚的高度？
我们在一个 Angular 项目中使用自定义指令实现了这一点，该指令跟踪每个元素被附加后立即使用了多少高度，然后当 heightLeftInPage 变得足够低时，它会附加页脚元素。这是一种非常自定义的方式，最适合用于表格布局，您可以逐行缓慢地追加项目。我敢肯定其他人也做过类似的事情，但我从未在网上任何地方看到过它的记录。

标签： html css

【解决方案1】：

CSS 属性位置设置为固定的元素将通过将顶部或底部设置为 0 “粘”到页面边缘。它们还将在每个打印页面上重复。

【讨论】：