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

【问题标题】：Sticking custom footer on each page to bottom while printing打印时将每页上的自定义页脚粘贴到底部
【发布时间】：2014-01-09 22:01:33
【问题描述】：

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

【问题讨论】：

您说的是用实际打印机打印到硬拷贝上吗？我认为在这种情况下你能做的最好的事情就是要求你也知道正在打印的纸张的尺寸。您可以在 CSS 中使用英寸作为度量单位。这可能会对你有所帮助。
是的。但我的解决方案必须涵盖任何尺寸的纸张。
您能否向打印人员询问他们正在打印的纸张的尺寸？您可以在他们选择的下拉框中提供它或其他东西。默认为最常见的纸张尺寸。这是我能想到的最好的。也许别人有更好的东西。
另一种选择是将您的页面转换为 PDF，然后让此人打印 PDF 文档。 PDF 可以很好地缩放。
不，只是我不想知道纸张的大小。它必须在没有它的情况下工作。

标签： html css

【解决方案1】：

终于找到答案了：

html,body 必须有高度：100%；
应该有两种类型的 div：outside（页面大小）、footer
对于两个设置显示：块；
对于外部设定高度：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>

【讨论】：

【解决方案2】：

更新我对上面的代码进行了一些尝试，这可能比我最初想象的更容易。（注意，页脚可能会与前一个 div 的内容重叠，这可以通过向内容 div 添加一个等于您的自定义页脚设置高度的 margin-bottom 属性来解决 - 此外，如果您的页面内容之间的时间过长分页符，这仍然有几个需要参加的场景）。综上所述，我在本地进行了测试，结果如您所愿。

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（您的自定义页脚和/或页眉） .然后在打印事件后动态改回格式。

【讨论】：

打印时有什么方法可以计算页面高度吗？
你可以计算你的dom元素的累积高度how to calculate height。不过，这可能会变得复杂，具体取决于您要打印的内容。
我想了很多，改变了主意，有了一个更简单的解决方案，我在本地进行了测试，它奏效了。
很遗憾，但您的更新对我不起作用...页脚似乎根本不存在。
请原谅我，我在 Chrome 上测试过，只是在 FireFox 上试过（在 Chrome 上工作，但在 firefox 上不工作）。很高兴您找到了适合您的解决方案。

【解决方案3】：

如果您在页眉和页脚中使用 and 元素

thead   {display: table-header-group;   }

tfoot   {display: table-footer-group;   }

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

【讨论】：

@ArtyMcFly，你是对的。我已将答案更改为在每一页上打印。
哈哈抱歉，看到你的回答变了，我删除了我最初的评论 0=]
这没有回答问题。

【解决方案4】：

这对我有用

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

    }

【讨论】：

投反对票，因为目前没有任何浏览器支持。
鉴于caniuse.com/#search=Page-margin%20boxes 中的每个浏览器都是红色的，我不知道这对你有什么作用。