使用html/css，我可以在每一页的底部打印一个页脚(就像打印到打印机一样)吗？
我需要的是页脚打印在每一页的底部(当它是打印在纸上，而不是打印在屏幕上，这很容易)…
我使用表格，我知道表格不好，我通常不使用它们，但这是一个特例：(我使用一个C# webBrowser控件，只是使用超文本标记语言来格式化要打印的文档)。
它工作得很好，除了位于底部的最后一页printed...the第一页的页脚，因为页面内容将其推到底部，但在最后一页，它仍然位于内容的底部(并且内容不会到达页面的底部)。
这是要显示的一张图片(这是我打印预览webBrowser的时候)。不要介意绿色的文本，只是为了测试。
good and bad footer http://pdem.info/badfooter.png
正如您所看到的，在左侧，页脚被内容强制放在底部，而在右侧，页脚相对于内容处于相同的位置，但我希望它位于底部！
我的页脚的代码片段是：
<tfoot id='footer'><tr><td>Your footer goes here</td></tr></tfoot>有什么办法让页脚在底部吗？如果有办法让div像那样工作，我不反对使用div！
=========EDIT=========
以下是部分代码：
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>");回答 2
Stack Overflow用户
发布于 2011-06-11 00:54:27
<style type="text/css">
#footer
{
position:absolute;
left:200px;
top:750px;
}
</style>更改left:和top:以适合您的页面。这将使它完全处于您想要的位置。
Stack Overflow用户
发布于 2011-06-11 01:03:25
编辑-注：我的解决方案发布在看起来可能是对更改了问题的问题的编辑之前(当我第一次阅读问题时没有显示图片，信息也更少)，答案现在是无关紧要的抱歉。无论如何，这可能会在其他方面对你有所帮助。
为了保持多个页面的一致性，我个人会使用div。
下一个选项是CSS，就像这样(我不知道这是否可行)
#footer {
height:100%;
vertical-align:bottom;
}编辑在此处结束
我使用print和screen媒体类型来实现这一点，在页面的中包含如下样式表：
<link rel="stylesheet" href="style.css" type="text/css" media="print" />确保您的另一个'screen‘样式表被标记为media="screen“
现在，在样式表中输入您希望打印的页脚代码，在本例中我使用了一个div标记：
#print_footer { border:0 solid #333; font-family:arial; font-size:8px; color:#000; margin-bottom:0; }打开普通的“screen”样式表，添加以下类
.no_screen { display:none; }这将停止元素在屏幕上显示。
在您页面中创建DIV
<div id="print_footer" class="no_screen">Copyright © 2011 Ryan. All rights reserved.</div>我希望这能帮到你。
https://stackoverflow.com/questions/6309605
复制相似问题
腾讯云开发者
