CODEWITHSUNDEEP
htmlcss
black_belt
black_belt

Reputation: 6799

How to show footer in every page when printing an HTML Page

I am trying to create an html page which will be used for printing data using browser. I need to include a footer with it which will show up in every page at the bottom when printed and I have developed the following code for implementing this.

The following code is working fine, but the problem is when my contents inside the div content gets long enough to make users scroll down the page, that time if I go to the print option of Google Chrome and see the print preview, I can see the footer shows up in the first page, but not in the rest of the pages. But this same code works in firefox and the footer shows up in all the printed pages(and even shows up in the print preview).

Could you please help me to show up the footer in every pages when printed using Google chrome?

Thanks :)

<html>
<head>  

 <style type="text/css">
 html {margin:0;padding:0;border:0; overflow-y: scroll;}
 body { font-size:75%;color:#222; font-family: Geneva, Arial, Helvetica, sans-serif;}
 #container {margin:0 auto; height:100%; }
 #content{}
 #footer {position: fixed ; left: 0px; bottom: 0px; right: 0px; font-size:10px; }
 </style>

 </head>

<body>
 <div id="container">
    <div id="content">
       My Contents
    </div>

   <div id="footer">This is my Footer</div>

 </div>

</body>
</html>

Upvotes: 3

Views: 11227

Answers (3)

diljith jithu
diljith jithu

Reputation: 11

You need to set in your footer:

position:fixed;
bottom:0;

Upvotes: 0

MIWMIB
MIWMIB

Reputation: 1497

I've spent a lot of time on this footer thing, I was able to do it on IE using position: fixed and bottom 0, with some body margins to avoid the content from overlapping with the footer.

But with chrome, the only way I was able to do something similar was by using javascript to calculate the white space required to push the footer to the bottom (by assigning that value to an empty div): -

var printPageHeight = 1900;  //(have to test this value)
var mFooter = $("#footer");
var bottomPos = mFooter.position().top + mFooter.height();


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


$("#whiteSpaceToPositionFooter").css("height", remainingGap+"px");

However, getting the size/height of the print page right is very difficult and the height() method of jquery doesn't account for margins and heights.

Upvotes: 0

user1634058
user1634058

Reputation:

Should have position: relative to parent element of footer and it's parent element is body so give it to body or container

Upvotes: 3

Related Questions