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

CodePudding user response：

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

<div>
  content
</div>

<div >
  This is footer
</div>

CodePudding user response：

.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).