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

发布时间：2020-12-14 21:16:18 所属栏目：资源来源：网络整理

导读：我想打印30页,其中一些数据位于顶部,一些数据位于底部. 我的代码看起来像： ...div style="page-break-after: always" divThis should be on top1/div divThis should be on bottom1/div/divdiv style="page-break-after: always" divThis should be on top2

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

我尝试了一切：

>位置：相对(无变化),绝对(仅限第一页页脚),固定(仅限最后一页)
>将html,body,每个div高度设置为100％.没有想法我为什么要这样做.没有改变什么

也许有办法强制我的浏览器(FF)将div粘贴到页面底部？

解决方法

终于找到了答案：

> html,身体必须有高度：100％;
>应该有两种类型的div：外部(页面大小),页脚
>对于两个设置显示：块;
>对于外部设定高度：100％;位置：相对;
>对于内部设定位置：绝对;底部：0px;

瞧！

这是我的完整代码：

<!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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!