We help IT Professionals succeed at work.

Head and footer

ayha1999
ayha1999 asked
on
How can I push the footer to the end of every printed page? The following css displays header and footer on every printed page.

thanks

ayha
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            text-align: center;
            font-size: xx-large;
        }
        .style2
        {
            font-size: xx-large;
        }
    </style>
    <style type="text/css">
        @media Print, screen
            {
             thead {display: table-header-group; background:#ff0; top: 0;
                   padding:10px;}
             tfoot {display: table-footer-group;  position: relative;
               bottom:0;
               width:100%;
               height:60px;   /* Height of the footer */
               background:#6cf;}
             html, body {
               margin:0;
               padding:0;
               height:100%;
               min-height: 100%;
                    }
             #container {
               min-height:100%;
               position:relative;
               height: 100%;
            }
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
    <table style="height: 100%;">
    <thead>
    <tr><td class="style1"><strong>Header</strong></td></tr>
    </thead>
  
    <tbody>
    <tr>
    <td>Page Contents<br />
        Page Contents<br />
        Page Contents<br />
        Page Contents<br />
        Page Contents<br />
        Page Contents<br />
        Page Contents<br />
        Page Contents<br />
        Page Contents<br />
        Page ContentsPage ContentsPage Contents<br />
        Page ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage 
        ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage 
        ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage 
        ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage 
        ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage 
        ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage 
        ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage 
        ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage 
        ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage 
        ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage 
        ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage 
        ContentsPage ContentsPage Contentsv<br />
        Page ContentsPage ContentsPage ContentsPage ContentsPage Contents<br />
        <br />
        Page ContentsPage ContentsPage Contents<br />
        Page Contents<br />
        Page ContentsPage Contents<br />
        Page Contents<br />
        <br />
        Page Contents<br />
        Page Contents<br />
        Page Contents<br />
        <br />
        Page Contents<br />
        <br />
        Page ContentsPage Contents<br />
        Page ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage Contents<br />
        <br />
        Page ContentsPage Contents<br />
        Page Contents<br />
        Page ContentsPage ContentsPage ContentsPage Contents<br />
        Page Contents<br />
        Page ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage 
        ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage ContentsPage 
        ContentsPage Contents<br />
        Page ContentsPage ContentsPage ContentsPage Contents<br />
        Page Contents<br />
        <br />
        Page ContentsPage Contents<br />
        Page Contents<br />
        Page Contents<br />
        Page Contents<br />
        Page ContentsPage Contents<br />
        Page ContentsPage ContentsPage ContentsPage Contents<br />
        Page ContentsPage Contents<br />
        <br />
        Page ContentsPage Contents<br />
        Page Contents<br />
        Page Contents<br />
        Page Contents<br />
        Page ContentsPage Contents<br />
        Page ContentsPage ContentsPage ContentsPage Contents<br />
        Page ContentsPage Contents<br />
        Page ContentsPage Contents<br />
        Page Contents<br />
        Page Contents<br />
        Page Contents<br />
        Page ContentsPage Contents<br />
        Page ContentsPage ContentsPage ContentsPage Contents<br />
        Page ContentsPage Contents<br />
        <br />
        </td>
    </tr>
    </tbody>
      <tfoot>
    <tr><td class="style2"><strong>Footer</strong></td></tr>
    </tfoot>
    </table>
    </div>
    </form>
</body>
</html>

Open in new window

Comment
Watch Question

Commented:
you can put height to the table to match the size of the paper

you can also use div tage as footer

<div style="position: absolute; bottom: 0; margin: 0 auto;" >
       footer text
</div>
Commented:
There are many thoughts on this. Perhaps http://css-discuss.incutio.com/wiki/Printing_Headers can point you to a manageable solution.