HTML页脚底部的所有HTML页面在IE中打印出来 [英] HTML footer on bottom of all pages of HTML print out in IE
问题描述
我被要求在HTML网页的每一页的底部打印一个页脚（而不是浏览器上的实际页面）。你们知道任何方式吗？ （它应该在IE上工作，只是IE是好的）
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)
我尝试使用固定底部，但内容与页脚重叠。
I tried using fixed bottom, but contents overlaps with the footer.
我试图使用javascript来计算空间，并给一个空的div的高度：是使用如果页脚的底部％页面高度！= 0，添加所需的差距。但是页脚底部的值和所需的空格似乎随着元素类型的更改而改变。
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.
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");
我试过使用table，适用于所有的页面，除了最后一个。
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'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: -
-
在css：@media print {position：fixed; top：0;左：0; z-index -1; } Ad IE显示在每个页面的底部，并通过z-index发送到后台。
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.
尽管如此，IE中的文本背景是透明的打印输出，所以文本是在页脚的顶部。因此，在绝对顶部左侧位置使用1px x 1px的白色图片作为图片的背景。
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.
使用javaScript设置高度和宽度
Used javaScript to set the height and width of the image same as the height of the div that had content.
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：
@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() );
在每个页面的底部， I USED :(第二种情况）
TO GET FOOTER ON THE BOTTOM OF EVERY PAGE, I USED: (2nd Scenario)
css：
@media print {
#footer {
position: fixed;
bottom: 0;
}
body {
margin: x x y x; (y should reflect the height of the footer);
}
这篇关于HTML页脚底部的所有HTML页面在IE中打印出来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
