在 IE 中打印出所有 HTML 页面底部的 HTML 页脚答案

【问题标题】：HTML footer on bottom of all pages of HTML print out in IE在 IE 中打印出所有 HTML 页面底部的 HTML 页脚
【发布时间】：2013-07-03 05:01:43
【问题描述】：

我被要求在 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");

我尝试使用表格，除最后一页外，所有页面都适用。

我尝试了其他一些边距和类似的调整，但它们也没有奏效。

如果可能的话，我实际上希望页脚仅显示在打印输出的最后一页的底部。

【问题讨论】：

标签： javascript html css internet-explorer

【解决方案1】：

我正在回答我自己的问题，以防万一其他人需要解决方案。

经过长时间的研究和深入的尝试（主要是反复试验），我使用以下逻辑将页脚仅设置在最后一页的底部：-

在 css 中：@media print { 位置：固定；顶部：0；左：0； z-index -1; } Ad IE 显示在每个页面的底部，并通过 z-index 发送到后台。
不过，IE 中文本的背景在打印输出时是透明的，因此文本位于页脚顶部。因此，在绝对左上角位置使用 1px x 1px 的白色图像作为图像的背景。
使用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);
}

【讨论】：

在撰写本文时，此解决方案在 Chrome 中不起作用。
没错。该问题是专门针对 IE 和 IE 提出的。
我已经相应地更新了标题和标签，OP可能会考虑下次这样做。 mod 也可以标记并删除这些无用的 cmets。
这在 2015 年 5 月的 Firefox 以及 Chrome 和 Safari 上确实有效 Firefox 37.0.2 Chromium 41.0.2272.76
我正在尝试您在每个页面底部的页脚解决方案，并且打印时 IE 会忽略正文元素上的边距，并且页面文本在页脚下流动。帮助？（顺便说一句，它应该是 body，而不是 CSS 中的#body）。

【解决方案2】：

也许是这样的？

<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";
}

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

【讨论】：

有趣的方法，但不幸的是，如果您有多个页面，则不起作用。