We help IT Professionals succeed at work.

Repeating header and footer in printouts

ayha1999
ayha1999 asked
on
How can I repeat header and footer when printing web pages using CSS or any other method? Footer need to be printed in bottom of the page?
Comment
Watch Question

Commented:
Are you saying you want to dynamically add a header and a footer when someone prints the page? If so you can use the following css code, where the "header" and "footer" divs are invisible unless the page is being printed:

<style type="text/css">#header {visibility: hidden;}

#footer{visibility: hidden;}

@media print {
    #header, #footer {visibility: visible;}
  }

</style>

<div id="header">Header Data Goes Here</div>

<div id="footer">Footer Data Goes Here</div>

Author

Commented:
How can I repeat the header and footer in every printed pages?

thanks
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
You can with fixed positioning, see here:

http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning

i've tested this and it doesn't work with the chrome browser but does with the others.  Maybe someone else might know why...

Author

Commented:
The following css displays header and footer in all printed pages. How can I push the foot to the bottom of every page?

Thanks
<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

Top Expert 2013
Commented:
Not going to happen with just the browser You need to be able to do pagination and that is going to require additional software that you will probably have to buy.  One such package for IE is HERE

With additional possibilities HERE


Cd&
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
So the answer is that it cannot be done in every browser with one solution
Top Expert 2013

Commented:
@tagit,

There may be a piece of software somewhere that can do it cross browser, but I have not found it, so there may still be a 2 or 3% chance, but t will almost certainly be overpriced and under supported because it is not something you normally expect to do with a browser.


Cd&
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
@Cd - I agree there's always the possibility that something out there exists but I'm basing this on the evidence at hand, especially around the supported standards of CSS/html rather than any plugin that the user would need to install if it exists.

The confusing thing is that W3.org has specified that by setting the position to fixed positioning.  They state "For paged media, boxes with fixed positions are repeated on every page. This is useful for placing, for instance, a signature at the bottom of each page." here: http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning.  

This CSS works for all browsers except Chrome so even if there was an extension that solves the problem it is just a workaround that would require every user to install this option.  not to mention what would happen when Chrome does implement fixed positioning.
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
@ayha1999 your table header and footer DOES repeat on every page in FF and IE.  What browser are you testing in?
Top Expert 2013

Commented:
@tagit
Are you seeing the standard browser header and footer or the custom header he is trying to print


Cd&
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
I'm seeing both...  here are the screenshots
Clipboard01.jpg
Clipboard02.jpg
Top Expert 2013

Commented:
Okay that is just putting a header footer at the begin and end of contet.  he qay I understand the question is that they want the header and footer at the very top and bottom in place of the standard header from the browser.  Maybe I'm wrong.


ayha1999,

We need some response from you.



Cd&
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
No I also understood that to be the case, however having the header/footer even appear on each page has posed more of a problem.  If ayha1999 needs to have them at the bottom of the page then used position: fixed instead of relative
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
see the attached working in FF
Clipboard03.jpg
Top Expert 2013

Commented:
You are right, something is better than nothing and fixed position does help as you suggest.  I gat a little to focus on the core problem. You have to smack once in a while to keep me awake.


Cd&
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
haha :) i know the feeling...

Author

Commented:
hi,

sorry for the delay response. I am using this page in an intranet application where the browser is IE 6. I get the header and footer printed but I want to push the footer to the bottom. the following code push the footer to the bottom but doesn't appear in all printed page i.e. header in the first page and the footer in the last (bottom).  I am trying to combine these code to make header and footer in all printed pages and the footer on the bottom.



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
        .style2
        {
            text-align: center;
        }
        .style3
        {
            text-align: center;
            font-size: xx-large;
        }
    </style>

    <style type="text/css">
        @media print, screen
        {
            html,
            body {
               margin:0;
               padding:0;
               height:100%;
 min-height:100%;
            }
            #container {
               min-height:100%;
               position:relative;
height:100%;
            }
            #header {
               background:#ff0;
               padding:10px;
            }
            #body {
               padding:10px;
               padding-bottom:60px;   /* Height of the footer */
            }
            #footer {
               position:absolute;
               bottom:0;
               width:100%;
               height:60px;   /* Height of the footer */
               background:#6cf;
            }
        }
    </style>
</head>
<body>

<div id="container">
   <div id="header" class="style3"><strong>Header</strong></div>
   <div id="body"> <table class="style1">
       <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</td>
        </tr>
       <tr>
            </td></tr>
    </table></div>
   <div id="footer" class="style3"><strong>Footer</strong></div>
</div>
</body>
</html>

Open in new window

Top Expert 2013

Commented:
If you have been following this conversation, it should be clear to you by now that you are not going to achieve your goal without pagination.

You can keep insisting on what you want forever but you are not going to get it unless you buy pagination software as suggested by the links in my earlier post.


Cd&
RobOwner (Aidellio)
Most Valuable Expert 2015

Commented:
I agree.  You're using an unsupported browser now so the only way around it is to do as @Cd suggests

Author

Commented:
Thanks all for your participation.