Question

我想在每个页面上打印页脚。页脚上方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

Answer 1

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

CSS：每页打印页脚

1 个答案: