Invoice footer is not printing on bottom

Question

I am trying to print a Invoice using default window.print()

Problem: Invoice is printing fine but footer is not printing on bottom of printed page as same as original invoice.

i want: footer should come at the bottom in every condition on first or last page(in case of long invoice)

If invoice is lengthy then footer should come on the last page bottom.

JS fiddle:

I am using Twitter Bootstrap layout

invoiced sample code https://github.com/sitepointweb/bootstrap-invoice/blob/master/sample-invoice.html enter image description here

You want to force the footer to print on the bottom of a printed page? Not going to happen. It will print after the end of the table. — Christina, Oct 17 '14 at 18:21
@Christina yes same. i want to print the Footer on bottom of printed page — Naresh, Oct 17 '14 at 18:22
If you need control over the printed page layout to that extent, look into generating a PDF. — Polynomial, Oct 17 '14 at 18:36

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

Try this

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

EDIT #

Just found this SO Question, Print header and footer on every page

edited May 23 '17 at 10:25

Community

1
1

answered Oct 17 '14 at 19:03

Billy

2,448
1
10
13

score 0 · Answer 2 · answered Oct 17 '14 at 21:02

This code will help you.
Make footer always bottom:

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

For old browser add this:

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

Invoice footer is not printing on bottom

2 Answers2

EDIT #