how to add footer on bottom of the last printed page

Question

I am creating a web based billing system, in which I have to generate bill pdfs of multiple pages.

The problem is: I want to print the footer at the bottom of last print page.

#footer{
  position: fixed;
  bottom: 0px;
  width:100%;
}

This code is printing footer on every page, but I want it only on last page.

Keep footer only at last page. Means, hide footer for other pages and display it on last page via CSS. — , Sep 06 '17 at 13:10
Try `position: absolute` and check this: https://stackoverflow.com/questions/1176770/footer-on-last-printed-page?rq=1 — Bellian, Sep 06 '17 at 13:16
pdf is generated by the browser using print style sheet, how would i know which one is last page? @anu — Harshit Kudeshiya, Sep 06 '17 at 13:27
i have tried positon:absolute, but it is giving the same result @Bellian — Harshit Kudeshiya, Sep 06 '17 at 13:30
try to use JS, if it is the last page, using document.createelement() — Han Han, Jan 25 '23 at 21:27

score 0 · Answer 1 · answered Sep 06 '17 at 14:37

0

Add this to your stylesheet, see if it helps you:

@media print { 
body {
  position: relative;
  }
#footer {
  position: absolute;
  bottom: 0;
  }
}

Reference: html footer at last page

answered Sep 06 '17 at 14:37

bhansa

7,282
3
30
55

5

i have tried that, it is not working. when i add this css, footer will start overlapping the content on last print page – Harshit Kudeshiya Sep 07 '17 at 10:46

Дима Климюк · Answer 2 · 2023-01-25T21:35:04.723

In addition to @bhansa answer

<style>
    @media print { 
    body {
      position: relative;
      }
    #footer {
      position: absolute;
      bottom: 0;
      }
    .empty {
        height: 150px;
        width: 100%;
       }
    }
</style>

<body>
    <div class="content">Somebody</div>
    <div class="empty"><div>
    <div id="footer" style="height=150px; width=100%">Footer</div>
</body>

In order not to overlap the content, add an empty div after the content that matches the height of the footer

how to add footer on bottom of the last printed page

2 Answers2