javascript - 在 IE 中打印出的所有 HTML 页面底部的 HTML 页脚

标签 javascript html css internet-explorer

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

我尝试使用表格,适用于所有页面,除了最后一个。

我尝试了一些其他边距和此类调整,但它们也没有用。

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

最佳答案

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

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

  1. 在 css 中:@media print { position: fixed;顶部:0;左:0; z-index -1; } Ad IE显示在每个页面的底部,由z-index发送到后台。

  2. 不过,IE 中的文本背景在打印输出时是透明的,因此文本位于页脚之上。因此,在绝对左上角位置使用 1px x 1px 的白色图像作为图像的背景。

  3. 使用 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;
   }
}

j查询:

 @('#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);
}

关于javascript - 在 IE 中打印出的所有 HTML 页面底部的 HTML 页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17482999/

相关文章:

javascript - 使用带有 MPEG-Dash 的流畅流 .ism list

javascript - 窗口旋转或切换不同设备的javascript事件是什么?

javascript - JQuery Packery 中心项目

javascript - 用 LESS 伪造一个 css 属性(并在解析时用真实属性替换它)

css - line-height的作用是什么,white-space :nowrap do?有什么作用

javascript - 用连字符和/或撇号匹配单词的正则表达式

javascript - 如何在javascript中访问存储在项目外部的文件?

javascript - 向左滑动不起作用

css - 如何正确声明带有字体粗细和字体样式的 CSS 字体?

javascript - content.match 不是一个函数