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

问题描述

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


    1. html,body必须有高度:100%;

    2. 应该有两种类型的div:outside(页面大小),footer
    3. 对于set display:block;

    4. 对于外部设置的高度:100%;位置:相对;

    5. 对于里面的设置位置:绝对;底部:0px;
    1. html,body MUST HAVE height: 100%;
    2. There should be two types of div: outside (size of page), footer
    3. For both set display: block;
    4. For the outside set height: 100%; position: relative;
    5. 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>
    

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

09-22 01:43