How to print footer at very bottom on every page?

Question

Hi everyone I have a html page with big table and when I print the page I want to print footer too at very bottom on every page. I did not find a solution that does this 100%. What I found is we can use tfoot, this will print on every page at the bottom but not on the last page, like example below

[tfoot example-1][1]

[tfoot example-2][2]

I found another solution which is to use position fixed, it did work but it covers last row of the table in the page. Like example below

[Position fixed example-1][3]

[Position fixed example-2][4]

the style that I use

       thead{
        display: table-header-group;
    }
    tfoot{
        display: table-footer-group;
    }
    tr,td{
        border: 1px solid;
        page-break-inside: avoid;
    }
    .footer{
        position: fixed;
    bottom: 0;
    text-align:center;
    width: 100%;
    padding-top: 10px;
        }
    @media print {
        tr {
            page-break-inside: avoid;
        }

}

Can anyone help me with one of these problems or if there is a solution that I haven't found. [1]: https://i.stack.imgur.com/DWCZ2.png [2]: https://i.stack.imgur.com/mkQAb.png [3]: https://i.stack.imgur.com/vTpam.png [4]: https://i.stack.imgur.com/t0LQu.png

score 0 · Answer 1 · answered Aug 10 '22 at 18:57

A display flex css style.

<html>

  <head>
    <title>this is title</title>
  </head>
  <style>
    .main-container {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

  </style>

  <body>
    <div class="main-container">
      <main>
        <h1>every thing within this.</h1>
      </main>
      <footer>this is footer.</footer>
    </div>
  </body>

</html>

and have more things in internet. you can search make html footer at bottom. or link

Thanks for your response but that didn't work when I print the page — Omar, Aug 10 '22 at 19:35

score 0 · Answer 2 · answered Aug 10 '22 at 18:59

0

There's also break, break-before and break-after properties which extend the page-break properties for images, code snippets, tables, and lists. Applying break-after to the footer may solve your problem.

answered Aug 10 '22 at 18:59

Dylan

54
1
8

How to print footer at very bottom on every page?

2 Answers2