CODEWITHSUNDEEP
htmlcss
Michal Loksik
Michal Loksik

Reputation: 1799

CSS: Printing footer on every page

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

Upvotes: 3

Views: 14684

Answers (1)

Edhar Dowbak
Edhar Dowbak

Reputation: 2828

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.

Upvotes: 2

Related Questions