打印 HTML 页面时如何在每个页面中显示页脚答案

【问题标题】：How to show footer in every page when printing an HTML Page打印 HTML 页面时如何在每个页面中显示页脚
【发布时间】：2017-11-15 14:47:43
【问题描述】：

我正在尝试创建一个 html 页面，该页面将用于使用浏览器打印数据。我需要包含一个页脚，它会在打印时显示在底部的每一页中，并且我已经开发了以下代码来实现这一点。

以下代码工作正常，但问题是当我在 div content 中的内容变得足够长以使用户向下滚动页面时，如果我转到 Google Chrome 的打印选项并查看打印内容预览，我可以看到页脚出现在第一页，但没有出现在其余页面中。但同样的代码在 Firefox 中也可以工作，并且页脚显示在所有打印页面中（甚至显示在打印预览中）。

您能帮我在使用谷歌浏览器打印时在每页显示页脚吗？

谢谢:)

<html>
<head>  

 <style type="text/css">
 html {margin:0;padding:0;border:0; overflow-y: scroll;}
 body { font-size:75%;color:#222; font-family: Geneva, Arial, Helvetica, sans-serif;}
 #container {margin:0 auto; height:100%; }
 #content{}
 #footer {position: fixed ; left: 0px; bottom: 0px; right: 0px; font-size:10px; }
 </style>

 </head>

<body>
 <div id="container">
    <div id="content">
       My Contents
    </div>

   <div id="footer">This is my Footer</div>

 </div>

</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

应该有position: relative 到页脚的父元素它的父元素是body 所以把它给body 或container

【讨论】：

【解决方案2】：

http://jsfiddle.net/jXujq/查看CSS代码...

【讨论】：

感谢您的回复。我已经尝试了代码，但它不起作用。使用您的代码，页脚甚至没有显示在 chrome 中。谢谢:)
@black_belt 使其位置：固定；z-index：10000；并应用背景颜色以便隐藏在元素后面
我刚试过#footer { position:fixed; z 指数：10000；左：0px；底部：0px；右：0px；字体大小：10px；但仍然没有运气:(
你在页脚看到的可能是 url 的链接

【解决方案3】：

对于仍然面临此问题的任何人，我创建了一个可以解决此问题的开源库。它允许从 Chrome 打印重复的页眉和页脚，具体取决于 html 的结构。看到这个答案：

https://stackoverflow.com/a/34444930/2196424

【讨论】：

【解决方案4】：

我在页脚这件事上花了很多时间，我可以在 IE 上使用 position: fixed 和 bottom 0 来完成，并带有一些正文边距以避免内容与页脚重叠。

但是对于 chrome，我能够做类似事情的唯一方法是使用 javascript 来计算将页脚推到底部所需的空白（通过将该值分配给一个空的 div）：-

var printPageHeight = 1900;  //(have to test this value)
var mFooter = $("#footer");
var bottomPos = mFooter.position().top + mFooter.height();


var remainingGap = (bottomPos <printPageHeight ) ? (printPageHeight -bottomPos) :           printPageHeight - (bottomPos % printPageHeight );


$("#whiteSpaceToPositionFooter").css("height", remainingGap+"px");

但是，正确获取打印页面的大小/高度非常困难，并且 jquery 的 height() 方法不考虑边距和高度。

【讨论】：

【解决方案5】：

您需要在页脚中设置：

position:fixed;
bottom:0;

【讨论】：

【解决方案6】：

也许这会对你有所帮助？

CSS Sticky Footer

【讨论】：