Using html / css, can I have a footer that prints (like a printer) at the bottom of each page?


What I need is for the footer to print at the bottom of each page (when it is printed on paper, not printed on screen, that's easy)...

I am using tables, I know tables are bad, I typically do not use them, but this is a special case: (I am using a C# webBrowser control, and just using HTML to format a document to print).

It works fine, except for the footer on the LAST page printed...the first pages it is sitting at the bottom, because the page content pushes it to the bottom, but on the last page, it is just at the bottom of the content still (and the content does not go to the bottom of the page)

Here is an image to show (this is when I go print preview of my webBrowser). dont mind the green text, just there for testing.

good and bad footer

As you can see, on the left, the footer is forced at the bottom by content, and on the right side, the footer is in the same position relative to content, but I want it at the bottom!

The snippet for my footer is just:

<tfoot id='footer'><tr><td>Your footer goes here</td></tr></tfoot>

Any ideas how to force the footer to be at the bottom? I have no objection to using div's if there is a way to make it work like that!


Here is some of the code:

The css:

@media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
//I have tried doing position:absolute/fixed with values in pixes and percents
@media screen {
    thead { display: none; }
    tfoot { display: none; }

Code that populates the webBrowser Control:

web_display.DocumentText = "";

            web_display.Document.Write("<body><table id='tblCont'><thead><tr><td>Your header goes here</td></tr></thead>" +
            web_display.Document.Write("<body><basefont size='2' face='verdana'>");
            web_display.Document.Write("<ul " +

            foreach (TNode part in tn.Nodes) {
                web_display.Document.Write("<li><strong>" + part.Text + "</strong>");
                web_display.Document.Write("<ul style='list-style:none;'>");

                foreach (TNode node in part.Nodes) {
                    web_display.Document.Write("<li><strong>" + node.Text + "</strong></li>");
                    web_display.Document.Write("<ol>");//this list will hold the textblock text

                    addTextBlk(web_display, node);

                    web_display.Document.Write("</ol>");//end textblock list
                    web_display.Document.Write("<br style='line-height:6px;'/>");
                web_display.Document.Write("</ul>");//end lvl2 list
                web_display.Document.Write("</li>");//end part item
            web_display.Document.Write("</ul>");//end part list
            //web_display.Document.Write("</li>");//end section item
            web_display.Document.Write("<br />");

            //web_display.Document.Write("</ul>");//end section list

            web_display.Document.Write("</td></tr></tbody><tfoot id='footer'><tr><td>Your footer goes here</td></tr></tfoot>" +
                "</table><div id='newFooter'>This is footer text</div></body>");

<style type="text/css">

Change the left: and top: to suit your page. that will position it absolutely in the exact place you want.