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

问题描述 投票：0回答：7

我正在尝试创建一个 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>
html css
7个回答
3
投票

页脚的父元素应该有 

position: relative
它的父元素是 
body
所以把它给 body 或 
container

1
投票

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

1
投票

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

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

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() 方法不考虑边距和高度。

0
投票

您需要在页脚中设置：

position:fixed;
bottom:0;
0
投票

hkbibvakwlmlkm wv vwokpowmv ssdvsvdqvqve

-2
投票

也许这对你有帮助？

CSS 粘性页脚

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.