Question

我想打印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到底部的页面？

Answer 1

终于找到了答案：

html，身体必须高度：100％;
应该有两种类型的div：外部（页面大小），页脚
对于两个设置显示：块;
外部设定高度：100％;职位：亲属;
对于内部设定位置：绝对; bottom：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>

Answer 2

<强>更新我用上面的代码玩了一下，这可能比我最初的想法更容易。（注意，页脚可能会重叠前一个div的内容，这可以通过向内容div添加margin-bottom属性来解决，该内容div等于自定义页脚设置的高度 - 另外，如果您的页面内容也是如此在分页符之间很长时间，这仍然会有一些需要参加的场景）。总而言之，我在当地进行了测试，并且按照您的意愿工作。

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

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

<小时/> 原始答案

不幸的是，没有简单的方法可以做到这一点。浏览器不提供创建自定义页眉和页脚的方法。

您最好的选择是将您想要的信息放在<head><title>YOUR COMMON CONTENT</title></head>中找到的标题标签中的每一页上。它不会是最漂亮的。这取决于您的要求。

另一种选择是使用@media print（CSS）和javascript来动态计算和插入空白分页符/间隙，同时在已知纸张大小的绝对位置插入div（您的自定义页脚和/或页眉）。然后在打印事件后动态更改格式。

Answer 3

这对我有用

只需在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;
        }

    }

Answer 4

如果您使用页眉和页脚的和元素

thead   {display: table-header-group;   }

tfoot   {display: table-footer-group;   }

来源：http://www.codeproject.com/Questions/247645/Print-html-table-into-A4-size

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

4 个答案: