3

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>
black_belt
  • 6,601
  • 36
  • 121
  • 185

6 Answers6

3

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

Chandrakant
  • 1,971
  • 1
  • 14
  • 33
1

http://jsfiddle.net/jXujq/ See the CSS code...

Arpit Srivastava
  • 2,249
  • 1
  • 16
  • 28
1

For anyone still facing this issue, I've created an open-source library that could solve it. It allows printing repeated headers and footers from Chrome, depending on the structure of your html. See this answer:

https://stackoverflow.com/a/34444930/2196424

Community
  • 1
  • 1
lastmjs
  • 924
  • 3
  • 11
  • 22
0

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.

MIWMIB
  • 1,407
  • 1
  • 14
  • 24
0

You need to set in your footer:

position:fixed;
bottom:0;
Vasyl Lyashkevych
  • 1,920
  • 2
  • 23
  • 38
diljith jithu
  • 11
  • 2
-2

Maybe this would help you?

CSS Sticky Footer

Furry
  • 340
  • 1
  • 4
  • 22