title: Using html/css can I have a footer that prints (like to a printer) at the bottom of each page?
body: <p>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)...</p>
  
  <p>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). </p>
  
  <p>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)</p>
  
  <p>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.</p>
  
  <p><a href="http://pdem.info/badfooter.png" rel="nofollow noreferrer">good and bad footer http://pdem.info/badfooter.png</a></p>
  
  <p>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!</p>
  
  <p>The snippet for my footer is just:</p>
  
  <pre><code>&lt;tfoot id='footer'&gt;&lt;tr&gt;&lt;td&gt;Your footer goes here&lt;/td&gt;&lt;/tr&gt;&lt;/tfoot&gt;
  </code></pre>
  
  <p>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!</p>
  
  <p>=========EDIT=========</p>
  
  <p>Here is some of the code:</p>
  
  <p>The css:</p>
  
  <pre><code>@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></pre>
  
  <p>Code that populates the webBrowser Control:</p>
  
  <pre><code>web_display.DocumentText = "";
  
              web_display.Document.Write("&lt;body&gt;&lt;table id='tblCont'&gt;&lt;thead&gt;&lt;tr&gt;&lt;td&gt;Your header goes here&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;" +
                  "&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;");
              web_display.Document.Write("&lt;body&gt;&lt;basefont size='2' face='verdana'&gt;");
              web_display.Document.Write("&lt;ul " + 
                  "style='list-style:none;"+
                  "padding-left:0px;"+
                  "margin-left:0px;"+
                  "'&gt;");
  
              foreach (TNode part in tn.Nodes) {
                  web_display.Document.Write("&lt;li&gt;&lt;strong&gt;" + part.Text + "&lt;/strong&gt;");
                  web_display.Document.Write("&lt;ul style='list-style:none;'&gt;");
  
                  foreach (TNode node in part.Nodes) {
                      web_display.Document.Write("&lt;li&gt;&lt;strong&gt;" + node.Text + "&lt;/strong&gt;&lt;/li&gt;");
                      web_display.Document.Write("&lt;ol&gt;");//this list will hold the textblock text
  
                      addTextBlk(web_display, node);
  
                      web_display.Document.Write("&lt;/ol&gt;");//end textblock list
                      web_display.Document.Write("&lt;br style='line-height:6px;'/&gt;");
                  }
                  web_display.Document.Write("&lt;/ul&gt;");//end lvl2 list
                  web_display.Document.Write("&lt;/li&gt;");//end part item
              }
              web_display.Document.Write("&lt;/ul&gt;");//end part list
              //web_display.Document.Write("&lt;/li&gt;");//end section item
              web_display.Document.Write("&lt;br /&gt;");
  
  
  
              //web_display.Document.Write("&lt;/ul&gt;");//end section list
  
              web_display.Document.Write("&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;tfoot id='footer'&gt;&lt;tr&gt;&lt;td&gt;Your footer goes here&lt;/td&gt;&lt;/tr&gt;&lt;/tfoot&gt;" +
                  "&lt;/table&gt;&lt;div id='newFooter'&gt;This is footer text&lt;/div&gt;&lt;/body&gt;");
  </code></pre>