Javascript 在IE中打印出来的所有HTML页面底部的HTML页脚

Javascript 在IE中打印出来的所有HTML页面底部的HTML页脚,javascript,html,css,internet-explorer,Javascript,Html,Css,Internet Explorer,我被要求在打印出来的html网页的每一页底部都有一个页脚(而不是浏览器上的实际页面)。你们知道怎么做吗?(它应该在IE上工作,只是IE很好) 我尝试使用固定底部,但内容与页脚重叠 我尝试使用javascript计算空间,并给一个空div指定高度:如果页脚底部的高度为%page height=0,添加所需的间隙。但是页脚底部和所需空白的值似乎随着元素类型的变化而变化 var printPageHeight = 1900; var mFooter = $("#footer-nt"); var bo

我被要求在打印出来的html网页的每一页底部都有一个页脚(而不是浏览器上的实际页面)。你们知道怎么做吗?(它应该在IE上工作,只是IE很好)

我尝试使用固定底部,但内容与页脚重叠

我尝试使用javascript计算空间,并给一个空div指定高度:如果页脚底部的高度为%page height=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");
var printPageHeight=1900;
var mFooter=$(“#页脚nt”);
var bottomPos=mFooter.position().top+mFooter.height();

var remainingGap=(bottomPos可能是这样的吗

<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";
}
/*此css文件仅用于打印目的*/
正文:之后{
内容:“我是页脚”;
}

使用文档末尾的最后一个元素,而不是正文…

我在回答我自己的问题,以防其他人需要解决方案

经过长时间的研究和密集的尝试(主要是尝试和错误),我使用以下逻辑仅在最后一页的底部设置页脚:-

  • 在css:@media print{position:fixed;top:0;left:0;z-index-1;}中,IE将其显示在每页的底部,并通过z-index发送到后台

  • 尽管如此,IE中文本的背景在打印输出时是透明的,因此文本位于页脚的顶部。因此,在绝对左上角位置使用1px x x 1px的白色图像作为图像的背景

  • 使用javaScript将图像的高度和宽度设置为与包含内容的div的高度相同

  • html:

    jquery:

     @('#whiteBg').height(  $('#content')).height()  );
    

    为了在每页的底部显示页脚,我使用了:(第二个场景)

    css:


    在撰写本文的时候,这个解决方案在Chrome中没有用。没错。这个问题是专门针对IE和IE提出的。我已经更新了标题和标签,OP可以考虑下一次这样做。MOD也可以标记和删除这些无用的评论。这对5月20日Firefox以及Chrome和Safari都有效。15 Firefox 37.0.2 Chromium 41.0.2272.76I正在尝试您的解决方案,用于解决每页底部的页脚和正文元素的边距被IE在打印时忽略,页面文本在页脚下流动的问题。帮助?(顺便说一句,它应该是正文,而不是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;
       }
    }
    
     @('#whiteBg').height(  $('#content')).height()  );
    
    @media print {
       #footer {
         position: fixed;
         bottom: 0;
       }
       body {
         margin: x x y x; (y should reflect the height of the footer);
    }