Question

我正在尝试使用默认window.print()

打印发票

问题：发票打印正常，但打印页面底部的页脚打印与原始发票不同。

我想： 在第一页或最后一页（如果是长发票）的每种情况下，页脚都应该位于底部

如果发票很长，则页脚应位于最后一页底部。

JS小提琴：

我正在使用Twitter Bootstrap布局

已开具发票的示例代码 https://github.com/sitepointweb/bootstrap-invoice/blob/master/sample-invoice.html enter image description here

Answer 1

试试这个

@media print {
    .invoiceFooter {
        position: fixed;
        bottom: 0;
    }
}

编辑＃

刚刚找到这个SO Question, Print header and footer on every page

Answer 2

此代码可以帮助您。
页脚总是在底部：

DEMO：http://jsfiddle.net/bsjmq1pp/2/

HTML

<body>
  <div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
</body>

CSS

html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
padding:10px;
background:#5ee;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background:#ee5;
}

对于旧版浏览器，请添加：

<!--[if lt IE 7]>
<style type="text/css">
  #wrapper { height:100%; }
</style>
<![endif]-->

发票页脚未在底部打印

2 个答案:

编辑＃