我被要求在html网页的每一页的底部找到一个页脚,打印出来(而不是浏览器上的实际页面).你们知道有什么办法吗? (它应该在IE上工作,只是IE是好的)
我尝试使用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");
我尝试使用表,除了最后一个以外,对所有页面都很好.
我尝试了几个其他的边距和这样的调整,但他们也没有工作.
解决方法
我正在回答我自己的问题,以防其他人需要解决方案.
经过长时间的研究和密集的尝试(主要是试验和错误),我使用以下逻辑仅在最后一页的底部设置页脚:
>在css中:@media print {position:fixed;顶部:0;左:0; z-index -1; }广告IE显示在每个页面的底部,并被z-index发送到背景.@H_403_21@>然而,IE中的文本背景在打印输出中是透明的,因此文本位于页脚之上.所以,在绝对的左上角位置使用1px×1px的白色图像作为图像的背景.@H_403_21@>使用javaScript设置图像的高度和宽度与具有内容的div的高度相同.
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() );
CSS:
@media print { #footer { position: fixed; bottom: 0; } body { margin: x x y x; (y should reflect the height of the footer); }