Sticking custom footer on each page to bottom while printing
Finally found an answer:
- html,body MUST HAVE height: 100%;
- There should be two types of div: outside (size of page), footer
- For both set display: block;
- For the outside set height: 100%; position: relative;
- For the inside set position: absolute; bottom: 0px;
Voila!
Here is my complete code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<style>
html,body
{
height: 100%;
margin: 0px;
}
body > div
{
height: 100%;
display: block;
position: relative;
}
body > div > div
{
position: absolute;
bottom: 0px;
left: 0px;
}
</style>
</head>
<body>
<div>
Page1
<div>Page1Footer</div>
</div>
<div>
Page2
<div>Page2Footer</div>
</div>
<div>
Page3
<div>Page3Footer</div>
</div>
</body>
</html>
This works for me
Just add following css in your html file
@page {
margin-bottom: 40px;
counter-increment: page;
@bottom-right {
border-top: 1px solid #000000;
padding-right:20px;
font-size: 12px !important;
content: "Page " counter(page) " of " counter(pages);
}
@bottom-left {
content: "Footer content goes here.";
border-top: 1px solid #000000;
}
}
Update
I played around a little bit with the code above and this may work easier than what I initially thought. (Note, there is potential for the footer to overlap content from the previous div, this could be resolved by adding a margin-bottom
attribute to the content div equal to your custom footers set height - Also, if your page content is too long between page breaks, this will still have a couple scenarios that need attending). All that said, I tested locally and it worked as you desired.
CSS
<style>
@media print{
.footer{
position:relative;
top:-20px; // this sets the footer -20px from the top of the next
//header/page ... 20px above the bottom of target page
//so make sure it is more negative than your footer's height.
height:10px;//notice that the top position subtracts
//more than the assigned height of the footer
}
}
</style>
HTML
<body>
<div style="page-break-after: always">
<div>This should be on top1</div>
</div>
<div style="page-break-after: always">
<div class="footer">This should be on bottom of page1</div>
<div>This should be on top2</div>
</div>
<div class="footer">This should be on bottom of page2</div>
</body>
Original Answer
Unfortunately there is no easy way to do this. Browsers do not offer a means of creating custom headers and footers for printing.
Your best bet is to place information you want on every page in the title tag found in the <head><title>YOUR COMMON CONTENT</title></head>
It's not going to be the prettiest. It comes down to your requirements.
The other option is to use @media print (CSS) coupled with javascript to dynamically calculate and insert page breaks/gaps of white-space while inserting divs(your custom footer and or header) at absolute positions for the known paper size. Then after the print event dynamically change the format back.