HTML footer on bottom of all pages of HTML print out in IE

javascript html css internet-explorer

27,877

Solution 1

I'm answering my own question just in case if anyone else needs a solution.

After a long research and intensive tries (mainly trial and errors), I used following logic to set the footer only on the bottom of the last page: -

In css: @media print { position: fixed; top: 0; left: 0; z-index -1; } Ad IE displayed it on bottom of every page, and was sent to background by z-index.
Still, the background of text in IE was transparent in print out, so the text was on top of footer. So, used white image of 1px by 1px in absolute top left position to act as an background of the image.
Used javaScript to set the height and width of the image same as the height of the div that had content.

html:

<body>
    <div id="wrapper"> <!-- not necessary -->
        <img scr="./img/white.png" id="whiteBg" />
        <div id="content">
            <!-- content here -->
        </div>
    </div>
    <div id="footer">
    </div>
</body>

css:

@media screen {
    #whiteBg {
        display: none;
    }
}

@media print {
   #whiteBg {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1; //to send it to the background
   } 
   #wrapper {
      padding-bottom: (the size of the footer, to make footer visible on last page).
   }
   #footer {
     position: fixed;
     bottom: 0;
   }
}

jquery:

 @('#whiteBg').height(  $('#content')).height()  );

TO GET FOOTER ON THE BOTTOM OF EVERY PAGE, I USED: (2nd Scenario)

css:

@media print {
   #footer {
     position: fixed;
     bottom: 0;
   }
   body {
     margin: x x y x; (y should reflect the height of the footer);
}

Solution 2

Maybe something like this?

<link rel="stylesheet" href="print.css" type="text/css" media="print" /> /* this css file is only for printing purposes*/

body:after {
   content: "I am the footer";
}

Use the last element you have in the end of the document instead of body...

27,877

Author by

MIWMIB

Updated on July 30, 2022

Comments

MIWMIB almost 2 years
I am asked to get a footer on the bottom of every page of the html web page print out (not the actual page on the browser). Do you guys know any way to do it? (It should work on IE, and just IE is fine)

I tried using fixed bottom, but contents overlaps with the footer.

I tried using javascript to calculate space and give an empty div the height: was using if bottom of the footer % page height !=0, add Required gap. But the value of the bottom of the footer and required white space seems to change with change in elements type.
```
var printPageHeight = 1900; 
var mFooter = $("#footer-nt");
var bottomPos = mFooter.position().top + mFooter.height();


var remainingGap = (bottomPos <printPageHeight ) ? (printPageHeight -bottomPos) :       printPageHeight - (bottomPos % printPageHeight );


$("#whiteSpaceToPositionFooter").css("height", remainingGap+"px");
```
I tried using table, works well for all the pages, except the last one.

I tried few other margin and such tweaks but they didn't work either.

I actually want the footer to be displayed only on the bottom of the last page of the print out if that's possible.