Geek Answers Handbook

Pin custom footer on each page bottom when printing

I want to print 30 pages with some data at the top and some data at the bottom. My code looks like this:

<...> <div style="page-break-after: always"> <div>This should be on top1</div> <div>This should be on bottom1</div> </div> <div style="page-break-after: always"> <div>This should be on top2</div> <div>This should be on bottom2</div> </div> <etc>

I tried everything:

  • Positions: relative (no change), absolute (footer only on the first page), fixed (only on the last page)
  • Setting html, body, each div height to 100%. There are no ideals why I should do this. Didn't change anything

Maybe there is a way to make my browser (FF) stick to the div at the bottom of the page?

+12
html css
source share
5 answers

Finally found the answer:

  • html, the body MUST HAVE a height: 100%;
  • There must be two types of div: external (page size), footer
  • For both settings: block;
  • For external installation height: 100%; position: relative;
  • For internal 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>
+14
source share

Update I played a little with the code above, and this may work easier than I originally thought. (Note that there is a possibility that the footer overlaps the content from the previous div, this could be solved by adding the margin-bottom attribute to the content of the div equal to the height of the custom footers. Also, if your page content is too large between the gaps pages, it will still have several scripts that need to be visited). All that said, I tested on the spot, and it worked the way you wanted.

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 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 the means to create custom headers and footers for printing. A.

It’s best to place the right information on every page in the title tag found in <head><title>YOUR COMMON CONTENT</title></head> This will not be the most beautiful. It comes down to your requirements.

Another option is to use @media print (CSS) in conjunction with javascript to dynamically compute and insert gaps / spaces in spaces when inserting a div (your custom footer and / or header) into absolute positions for a known paper format, then dynamically after the print event change the format back.

+5
source share

It works for me

Just add the following css to 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; } }
+3
source share

If you use both elements for your header and footer

 thead {display: table-header-group; } tfoot {display: table-footer-group; }

Source: http://www.codeproject.com/Questions/247645/Print-html-table-into-A4-size

0
source share

Found great solutions here

Ultimate header and footer printable HTML template

0
source share

More articles:


All Articles