在打印时，将每页上的自定义页脚粘贴到底部 [英] Sticking custom footer on each page to bottom while printing
本文介绍了在打印时，将每页上的自定义页脚粘贴到底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想打印30页，顶部有一些数据，底部有一些数据。
我的代码如下所示：
I want to print 30 pages with some data on top and some data on bottom. My code looks like:
<...>
<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:
也许有一种方法可以强制我的浏览器（FF）将
- 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
贴到底部
Maybe there is a way to force my browser (FF) to stick div to bottom of page?
推荐答案
终于找到答案：
Finally found an answer:
- html，body必须有高度：100％;
- 应该有两种类型的div：outside（页面大小），footer
- 对于set display：block;
- 对于外部设置的高度：100％;位置：相对;
- 对于里面的设置位置：绝对;底部：0px;
- 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;
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>
这篇关于在打印时，将每页上的自定义页脚粘贴到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
