Html 打印时将每个页面上的自定义页脚粘贴到底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21032137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sticking custom footer on each page to bottom while printing
提问by peku33
I want to print 30 pages with some data on top and some data on bottom. My code looks like:
我想打印 30 页，顶部有一些数据，底部有一些数据。我的代码看起来像：
<...>
<div style="page-break-after: always">
<div>This should be on top1</div>
<div>This should be on bottom1</div>
</div>
<div style="page-break-after: always">
<div>This should be on top2</div>
<div>This should be on bottom2</div>
</div>
<etc>
I tried everything:
我尝试了一切：
- Positions: relative (no change), absolute (footer on first page only), fixed (on last page only)
- Setting html, body, each div height to 100%. No idead why should I do this. Did not change anything
- 位置：相对（无变化）、绝对（仅在第一页的页脚）、固定（仅在最后一页）
- 将 html、body、每个 div 的高度设置为 100%。不知道我为什么要这样做。没有改变任何东西
Maybe there is a way to force my browser (FF) to stick div to bottomof page?
也许有一种方法可以强制我的浏览器（FF）将div 粘贴到页面底部？
回答by peku33
Finally found an answer:
终于找到答案了：
- html,body MUST HAVE height: 100%;
- There should be two types of div: outside (size of page), footer
- For both set display: block;
- For the outside set height: 100%; position: relative;
- For the inside set position: absolute; bottom: 0px;
- html,body 必须有高度：100%；
- div应该有两种类型：outside（页面大小），footer
- 对于两个设置显示：块；
- 外置高度：100%；位置：相对；
- 对于内部设置位置：绝对；底部：0px；
Voila!
瞧！
Here is my complete code:
这是我的完整代码：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<style>
html,body
{
height: 100%;
margin: 0px;
}
body > div
{
height: 100%;
display: block;
position: relative;
}
body > div > div
{
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
</head>
<body>
<div>
Page1
<div>Page1Footer</div>
</div>
<div>
Page2
<div>Page2Footer</div>
</div>
<div>
Page3
<div>Page3Footer</div>
</div>
</body>
</html>
回答by Arthur Weborg
UpdateI played around a little bit with the code above and this may work easier than what I initially thought. (Note, there is potential for the footer to overlap content from the previous div, this could be resolved by adding a margin-bottomattribute to the content div equal to your custom footers set height - Also, if your page content is too long between page breaks, this will still have a couple scenarios that need attending). All that said, I tested locally and it worked as you desired.
更新我玩了一点上面的代码，这可能比我最初想象的更容易。（注意，页脚有可能与前一个 div 的内容重叠，这可以通过向margin-bottom内容 div添加一个属性来解决，该属性等于您的自定义页脚设置高度 - 此外，如果您的页面内容在分页符之间太长，这仍然会有一些需要参加的场景）。综上所述，我在本地进行了测试，并且按您的意愿工作。
CSS
CSS
<style>
@media print{
.footer{
position:relative;
top:-20px; // this sets the footer -20px from the top of the next
//header/page ... 20px above the bottom of target page
//so make sure it is more negative than your footer's height.
height:10px;//notice that the top position subtracts
//more than the assigned height of the footer
}
}
</style>
HTML
HTML
<body>
<div style="page-break-after: always">
<div>This should be on top1</div>
</div>
<div style="page-break-after: always">
<div class="footer">This should be on bottom of page1</div>
<div>This should be on top2</div>
</div>
<div class="footer">This should be on bottom of page2</div>
</body>
Original Answer原答案
Unfortunately there is no easy way to do this. Browsers do not offer a means of creating custom headers and footers for printing.
不幸的是，没有简单的方法可以做到这一点。浏览器不提供创建用于打印的自定义页眉和页脚的方法。
Your best bet is to place information you want on every page in the title tag found in the <head><title>YOUR COMMON CONTENT</title></head>It's not going to be the prettiest. It comes down to your requirements.
最好的办法是在每个页面的标题标签中放置您想要的信息。<head><title>YOUR COMMON CONTENT</title></head>它不会是最漂亮的。这取决于您的要求。
The other option is to use @media print (CSS) coupled with javascript to dynamically calculate and insert page breaks/gaps of white-space while inserting divs(your custom footer and or header) at absolute positions for the known paper size. Then after the print event dynamically change the format back.
另一种选择是使用@media print (CSS) 结合 javascript 来动态计算和插入分页符/空白空间，同时在已知纸张大小的绝对位置插入 div（您的自定义页脚和/或页眉）。然后在打印事件之后动态更改格式。
回答by jaydip jadhav
This works for me
这对我有用
Just add following css in your html file
只需在您的 html 文件中添加以下 css
@page {
margin-bottom: 40px;
counter-increment: page;
@bottom-right {
border-top: 1px solid #000000;
padding-right:20px;
font-size: 12px !important;
content: "Page " counter(page) " of " counter(pages);
}
@bottom-left {
content: "Footer content goes here.";
border-top: 1px solid #000000;
}
}
回答by JerryHuang.me
If you use the and elements for your header and footer
如果您使用 和 元素作为页眉和页脚
thead {display: table-header-group; }
tfoot {display: table-footer-group; }
Source: http://www.codeproject.com/Questions/247645/Print-html-table-into-A4-size
来源：http: //www.codeproject.com/Questions/247645/Print-html-table-into-A4-size
