在 IE 中打印出所有 HTML 页面底部的 HTML 页脚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17482999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML footer on bottom of all pages of HTML print out in IE
提问by Anup Kattel
I am asked to get a footer on the bottom of every page of the html web page print out (not the actual page on the browser). Do you guys know any way to do it? (It should work on IE, and just IE is fine)
我被要求在 html 网页打印出来的每个页面的底部得到一个页脚（不是浏览器上的实际页面）。大家知道有什么办法吗？（它应该适用于 IE，而 IE 就可以了）
I tried using fixed bottom, but contents overlaps with the footer.
我尝试使用固定底部，但内容与页脚重叠。
I tried using javascript to calculate space and give an empty div the height: was using if bottom of the footer % page height !=0, add Required gap. But the value of the bottom of the footer and required white space seems to change with change in elements type.
我尝试使用 javascript 来计算空间并给一个空的 div 高度：如果底部的页脚 % 页面高度 !=0，则添加必需的间隙。但是页脚底部的值和所需的空白似乎随着元素类型的变化而变化。
var printPageHeight = 1900;
var mFooter = $("#footer-nt");
var bottomPos = mFooter.position().top + mFooter.height();
var remainingGap = (bottomPos <printPageHeight ) ? (printPageHeight -bottomPos) : printPageHeight - (bottomPos % printPageHeight );
$("#whiteSpaceToPositionFooter").css("height", remainingGap+"px");
I tried using table, works well for all the pages, except the last one.
我尝试使用表格，适用于所有页面，除了最后一个。
I tried few other margin and such tweaks but they didn't work either.
我尝试了一些其他边距和此类调整，但它们也不起作用。
I actually want the footer to be displayed only on the bottom of the last page of the print out if that's possible.
如果可能的话，我实际上希望页脚仅显示在打印输出的最后一页的底部。
回答by Anup Kattel
I'm answering my own question just in case if anyone else needs a solution.
我正在回答我自己的问题，以防万一其他人需要解决方案。
After a long research and intensive tries (mainly trial and errors), I used following logic to set the footer only on the bottom of the last page: -
经过长时间的研究和密集的尝试（主要是反复试验），我使用以下逻辑将页脚仅设置在最后一页的底部：-
In css: @media print { position: fixed; top: 0; left: 0; z-index -1; } Ad IE displayed it on bottom of every page, and was sent to background by z-index.
Still, the background of text in IE was transparent in print out, so the text was on top of footer. So, used white image of 1px by 1px in absolute top left position to act as an background of the image.
Used javaScript to set the height and width of the image same as the height of the div that had content.
在 css 中：@media 打印 { 位置：固定；顶部：0；左：0；z-index -1; 广告 IE 显示在每个页面的底部，并由 z-index 发送到后台。
尽管如此，IE 中文本的背景在打印时是透明的，因此文本位于页脚的顶部。因此，在绝对左上角位置使用 1px x 1px 的白色图像作为图像的背景。
使用 javaScript 将图像的高度和宽度设置为与具有内容的 div 的高度相同。
html:
html：
<body>
<div id="wrapper"> <!-- not necessary -->
<img scr="./img/white.png" id="whiteBg" />
<div id="content">
<!-- content here -->
</div>
</div>
<div id="footer">
</div>
</body>
css:
css：
@media screen {
#whiteBg {
display: none;
}
}
@media print {
#whiteBg {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1; //to send it to the background
}
#wrapper {
padding-bottom: (the size of the footer, to make footer visible on last page).
}
#footer {
position: fixed;
bottom: 0;
}
}
jquery:
查询：
@('#whiteBg').height( $('#content')).height() );
TO GET FOOTER ON THE BOTTOM OF EVERY PAGE, I USED: (2nd Scenario)
为了在每个页面的底部放置页脚，我使用了：（第二个场景）
css:
css：
@media print {
#footer {
position: fixed;
bottom: 0;
}
body {
margin: x x y x; (y should reflect the height of the footer);
}
回答by Badr Hari
Maybe something like this?
也许是这样的？
<link rel="stylesheet" href="print.css" type="text/css" media="print" /> /* this css file is only for printing purposes*/
body:after {
content: "I am the footer";
}
Use the last element you have in the end of the document instead of body...
使用文档末尾的最后一个元素而不是正文...
