Question

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

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

使用Google Chrome打印时，您可以帮我在每个页面显示页脚吗？

谢谢：）

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

Answer 1

应该有position: relative到页脚的父元素它的父元素是body，所以将它赋予正文或container

Answer 2

http://jsfiddle.net/jXujq/请参阅CSS代码...

Answer 3

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

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

Answer 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（）方法并不考虑边距和高度。

Answer 5

您需要设置页脚：

position:fixed;
bottom:0;

Answer 6

也许这会对你有帮助吗？

CSS Sticky Footer

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

6 个答案: