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

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

来源

2012-08-30 black_belt

-2

也许这会帮助你？

CSS Sticky Footer

来源

2012-08-30 08:32:32 Furry

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

来源

2012-08-30 08:37:28

http://jsfiddle.net/jXujq/参见CSS代码...

来源

2012-08-30 08:43:18

感谢您reply.I已经尝试了代码，但它不工作。使用你的代码，页脚甚至不会在Chrome中显示。感谢:) –

@black_belt给它一些保证金.... –

@black_belt使它的位置：固定; z-index：10000;并应用背景颜色以隐藏元素 –

我已经在这个页脚上花了很多时间，我可以在IE中使用position：fixed和bottom 0，以及一些页边距来避免内容与页脚重叠。

但随着铬，我能够做同样的事情的唯一方法是通过使用javascript来计算页脚推向底部所需要的空白（由值赋给一个空格）： -

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-09 02:02:06