CSS: Printing footer on every page

Question

i would like to print footer on every page that I have. Text content in div above the footer is dynamic, so I don't know what size it will have. My footer has fixed position, so it will repeat on every page. My problem is that content is overflowing the footer.

@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

Possible duplicate of [Is there a way to get a web page header/footer printed on every page?](https://stackoverflow.com/questions/1722437/is-there-a-way-to-get-a-web-page-header-footer-printed-on-every-page) — Boaz, May 22 '17 at 12:45
Set `height` to footer and add `padding-bottom` to page to match the footer's height? — jsruok, May 22 '17 at 12:54
We achieved this in an Angular project using a custom directive that keeps track of how much height has been used immediately after each element gets appended and then when heightLeftInPage gets low enough it appends the footer element. This is a very custom way of doing it and works best with table layouts where you can slowly append items row by row. I'm sure other people have done similar things but I've never seen it documented anywhere online. — HK1, May 22 '17 at 16:48

score 2 · Answer 1 · answered Mar 14 '19 at 08:32

2

Elements with CSS property position set to fixed will “stick” to the edges of the page by setting top or bottom to 0. They will also repeat on each printed page.

answered Mar 14 '19 at 08:32

Edhar Dowbak

2,648
1
10
13

CSS: Printing footer on every page

1 Answers1