Using html/css can I have a footer that prints (like to 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 http://pdem.info/badfooter.png
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!
=========EDIT=========
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>" +
"<tbody><tr><td>");
web_display.Document.Write("<body><basefont size='2' face='verdana'>");
web_display.Document.Write("<ul " +
"style='list-style:none;"+
"padding-left:0px;"+
"margin-left:0px;"+
"'>");
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 se开发者_StackOverflowction 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">
#footer
{
position:absolute;
left:200px;
top:750px;
}
</style>
Change the left: and top: to suit your page. that will position it absolutely in the exact place you want.
EDIT - Note: My solution was posted prior to what looks like it may have been an edit (no picture was displayed when I first read the question and less information) on the question that changed it, the answer is now irrelevant sorry. This may be able to help you anyway with something else.
For consistency through multiple pages I would personally use a div.
Next option, CSS like (off the top of my head I don't know if this will work)
#footer {
height:100%;
vertical-align:bottom;
}
EDIT ENDS HERE
I use the print and screen media types for this, in the of your page include a stylesheet like this:
<link rel="stylesheet" href="style.css" type="text/css" media="print" />
Make sure your other 'screen' stylesheet is tagged with media="screen"
Now in your stylesheet put in the code for your footer as you would like to see it printed, in this example I'm using a div tag:
#print_footer { border:0 solid #333; font-family:arial; font-size:8px; color:#000; margin-bottom:0; }
Open your normal 'screen' stylesheet add the following class
.no_screen { display:none; }
This will stop the element from displaying on the screen.
In your page create your DIV
<div id="print_footer" class="no_screen">Copyright © 2011 Ryan. All rights reserved.</div>
I hope this helps.
加载中,请稍侯......
精彩评论