html footer don't seemed to stick at the bottom in Print Preview

Question

I couldn't get the actual copyright footer at the bottom of page 2 in the Print Preview even though I use @media print
if you change postion in .footer to "absolute" this footer does not appear in the second page.

I've pasted the letter template written in html below, much appreciate if anyone could shed some light on my issue.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
}
html, body {
min-height: 100%;
position:relative;
}
*#contents { min-height: 100%; }
* html *#contents { height: 100%; }
tfoot { display: table-footer-group; }
@media screen {
td.footer {
height: 37px;
clear: both;
font-family:"Verdana";
font-size:9px;
bottom: 0;
width: 100%;
color: #844C87;
position: fixed;
display none;
}
}
@media print {
.footer {
font-family:"Verdana";
font-size:9px;
color: #844C87;
bottom: 0;
position: absolute;
}
.push {
}
}
</style>
<STYLE TYPE='text/css'>
P.pagebreakhere {page-break-before: always}
</STYLE>
</head>
<body>
<table>
<thead><tr><td>
<!--*************************************************************************************-->
<table>
<tr><td align="left"><img src="someimage.gif"></td></tr>
</table>
<!--*************************************************************************************-->
<table width="650" border="0">
..... Some Header html markup code ....
</table><br/>
<!--*************************************************************************************-->
</td></tr></thead>
<tfoot><tr><td class="footer"><div class="push"></div>...the ACTUAL FOOTER e.g. some copyright statements....</td></tr></tfoot>
<tbody>
<tr><td>
<p>....Some Page 1 html markup code ....</p>
<!--*************************************************************************************-->
<P CLASS="pagebreakhere">
<!--*************************************************************************************-->
<table>
.....Some Page 2 html markup code ....
</table>
<!--*************************************************************************************-->
</td></tr>
</tbody>
</table>
</body>
</html>

Could anyone help? Desparate for an answer to this. Thanks – dale May 03 '12 at 01:42 — dale, May 03 '12 at 01:42
I'll be happy to help you if you create a jsfiddle.net – Davis May 30 '12 at 15:24 — Davis, May 30 '12 at 15:24

Paul Sweatte · Answer 1 · 2016-09-19T19:25:48.750

Use the browser specific print dialog instead. Sticky footers assume support for absolute or fixed positioning, neither of which are part of CSS paged media. The only workaround is to use fixed margins based on the content, such as the following example:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>CSS Page Breaks</title>
<style type="text/css">
@media all
  {
  .header, .footer, p { display:none; }
  }

@page :right {
    margin-top:9in;
}

@media print
  {
  .header, .footer
    {
    display: block;
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    page-break-before: right;
    }

  .header { page-break-before: auto; page-break-after: always; }

  p {
    display: block;
    orphans:2;
    widows:1;
    }
}
</style>
</head>
<body>
  <h1 class="header">Title</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

<h2 class="footer">End</h2>
</body>
</html>

References

XSL-FO Is Dead, CSS Paged Media Is Prime Suspect

html footer don't seemed to stick at the bottom in Print Preview

1 Answers1