Menu
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.
338
html. < div id = "footer" >This is a footer. This stays at the bottom of the page.
window. print() WILL print the whole page.
Perhaps the easiest is to use position: absolute to fix to the bottom, then a suitable margin/padding to make sure that the other text doesn't spill over the top of it. Here is the html main content. This works if the content does not take up the full page.
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With