11

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.

Shaun Wilson
  • 8,727
  • 3
  • 50
  • 48
MIWMIB
  • 1,407
  • 1
  • 14
  • 24

2 Answers2

12

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: -

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

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

  3. 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);
}
MIWMIB
  • 1,407
  • 1
  • 14
  • 24
  • As of the time of this writing, this solution does not work in Chrome. – Rap Mar 03 '14 at 16:20
  • 1
    That's right. The question was specifically asked for IE and IE only. – MIWMIB Mar 04 '14 at 06:44
  • i've updated the title and tags accordingly, OP may consider doing this next time. mod may flag and remove these unhelpful comments as well. – Shaun Wilson Nov 06 '14 at 04:03
  • This really works on Firefox as well as Chrome and Safari as of May 2015 Firefox 37.0.2 Chromium 41.0.2272.76 – Clain Dsilva May 07 '15 at 06:08
  • I'm trying out your solution for footer on the bottom of every page and margin on body element is ignored by IE in print, and page text flows under the footer. Help? (BTW it should be body, not #body in css). – Domchi Jan 29 '16 at 13:08
  • @Domchi may be I did #body in my code and that part was ignored and therefore it worked. It was a long time ago I used this in IE 8 and it definitely worked. What version of IE is yours? (and maybe give us some code snippet) – MIWMIB Feb 01 '16 at 00:29
  • @FrankGorman - I've tried IE10 and IE11 for the same effect (page content shows below footer in print preview). CSS is the same as your last one, and the HTML is the same as yours except I've pasted some Lorem Ipsum into content to make it larger than a single page, and my footer consists of an image. – Domchi Feb 02 '16 at 15:05
4

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

Badr Hari
  • 8,114
  • 18
  • 67
  • 100