在打印时，将每页上的自定义页脚粘贴到底部

本文介绍了在打印时，将每页上的自定义页脚粘贴到底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想打印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>

我试过一切：

位置：相对（无变化），绝对（仅在第一页的页脚），固定（仅在最后一页）

设置html，body，每个div的高度为100 ％。没有理念为什么我应该这样做。没有改变任何东西

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>

这篇关于在打印时，将每页上的自定义页脚粘贴到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！