打印时在最后一页底部放置一个div

Question

i'm trying to place a footer that'll only appear at bottom of the last page.

.footer {
  width: 100%;
  margin-bottom: 0 !important;
  font-size: 10pt;
  page-break-inside: avoid !important;
  page-break-before: auto !important;
}

here's the div :

      <div className="footer mt-auto grid h-16 grid-cols-2 content-center items-center justify-center bg-black ">
        <div className="col-span-1 col-start-2  text-white">
          Bla bla footer here
        </div>
        <img className="col-start-3 pl-20" src={logoIcon} alt="logo_icon" />
      </div>

I have also tried :

body {
  position: relative;
}

.printfooter {
  position: absolute;
  bottom: 0;
}

but it doesn't work, i've also tried position sticky but it prints on every page.

any help appreciated

Answer 1

 .footer { position: fixed; left: 0; bottom: 0; width: 100%; background-color: #ff5733; color: white; text-align: center;

 <div> content </div> <div class="footer"> This is footer </div>

Answer 2

.footer {
    clear: both;
    position: relative;
    height: 40px;
    margin-top: -40px;
}

this partially fixed the issue,in some pages it's right beside the end of the page, in some it has some margin from the bottom (even after removing margin-top:-40ps).