使用 html/css 我可以在每页底部打印页脚（就像打印机一样）吗？
我需要的是页脚打印在每页的底部（当它打印在纸上，而不是打印在屏幕上时，这很容易）...
我正在使用表格，我知道表格不好，我通常不使用它们，但这是一个特殊情况：（我使用 C# webBrowser 控件，并且仅使用 HTML 来格式化要打印的文档）。
它工作正常，除了打印的最后一页上的页脚......第一页它位于底部，因为页面内容将其推到底部，但在最后一页上，它位于底部内容仍然存在（并且内容不会到达页面底部）
这是要显示的图像（这是当我去打印预览我的网络浏览器时）。不要介意绿色文本，只是用于测试。
好的和坏的页脚 http://pdem.info/badfooter.png
如您所见，在左侧，页脚被内容强制位于底部，而在右侧，页脚相对于内容处于相同的位置，但我希望它位于底部！
我的页脚的片段只是：
<tfoot id='footer'><tr><td>Your footer goes here</td></tr></tfoot>
有什么想法如何强制页脚位于底部吗？如果有办法让它像那样工作的话，我不反对使用 div ！
=========编辑=========
这是一些代码：
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; }
}
填充 webBrowser 控件的代码：
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 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>");
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 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>");
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
更改 left: 和 top: 以适合您的页面。
这会将其绝对定位在您想要的确切位置。
Change the left: and top: to suit your page.
that will position it absolutely in the exact place you want.
编辑 - 注意：我的解决方案是在对更改它的问题、答案进行编辑之前发布的（当我第一次阅读问题时没有显示图片且信息较少）现在已经无关紧要了。无论如何，这可能会对您在其他方面有所帮助。
为了保持多个页面的一致性，我个人会使用 div。
下一个选项，CSS（我突然想到，我不知道这是否可行）
编辑在此结束
我为此使用打印和屏幕媒体类型，在您的页面中包含一个像这样的样式表：
确保您的其他“屏幕”样式表标记为 media="screen"
现在，在您的样式表中，按照您希望打印的方式输入页脚代码，在本示例中，我使用 div 标签：
打开普通的“屏幕”样式表添加以下类
这将阻止该元素在屏幕上显示。
在您的页面中创建您的 DIV
我希望这会有所帮助。
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)
EDIT ENDS HERE
I use the print and screen media types for this, in the of your page include a stylesheet like this:
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:
Open your normal 'screen' stylesheet add the following class
This will stop the element from displaying on the screen.
In your page create your DIV
I hope this helps.