3

我正在尝试创建一个 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>
4

6 回答 6

3

应该有position: relative页脚的父元素，它的父元素是这样的body，所以把它给身体或container

于 2012-08-30T08:37:28.747 回答
1

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

于 2012-08-30T08:43:18.263 回答
1

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

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

于 2015-12-23T23:12:24.467 回答
0

我在这个页脚的事情上花了很多时间，我可以在 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() 方法不考虑边距和高度。

于 2013-07-09T02:02:06.390 回答
0

您需要在页脚中设置：

position:fixed;
bottom:0;
于 2017-11-15T06:33:36.253 回答
-2

也许这会对你有所帮助？

CSS 粘滞页脚

于 2012-08-30T08:32:32.057 回答