Is it possible to print a different footer on each page?

Question

I am converting an Access application to the Internet and must print reports from it. These are letters sent by mail, so the bottom of the letter, which is the "please come back" part, will always be at the bottom of the page, no matter how large the text of the letter is. I used the DIV to lay out emails and simulate Access quite well, but I don’t know how to get each email header at the bottom of my page. Using CSS position: fixed; for a footer, only each footer is displayed at the bottom of each page, and we would like to be able to print several letters at once.

If I delete fixed , it will display each footer on its own page, they will not be aligned at the bottom.

Can I get a cake and eat it? No need to be a cross browser, and I will go to PDF if it is absolutely necessary, but what are my options in CSS / HTML? Somehow it all turned into a table and tried tfoot? But will this make it appear at the bottom of every page?

Edit: CSS / HTML sample:

 .reportcontainer { width: 100%; page-break-inside: avoid; page-break-after: always; position: relative; } .reportbody { float: left; text-align: left; } .reportfooter { width: 100%; float: left; bottom: 0; position: fixed; } <div class="reportcontainer"> <div class="reportbody"> yadda yadda yadda </div> <div class="reportfooter"> stuff goes here </div> </div> 

Answer 1

I would recommend using PDF. If you need this level of control for print materials, you'll be struggling for HTML to work in browsers, and that's really what PDF is for.

tfoot would not help, it only ensures that the footer is at the bottom of the table and not at the bottom of the page.

Answer 2

Try it. Recently, I had to find a lot of html publications. You can understand how you want to replicate divs, either a backend, or using jquery cloning for each report. Borders simply illustrate containers.

 .reportcontainer { width:8.5in; height:11in; page-break-inside:avoid; page-break-after:always; border:1px solid red; } .reportbody { width:100%; height:10in; border:1px solid yellow; } .reportfooter { width:100%; height:1in; border:1px solid blue; } </style> <div class="reportcontainer"> <div class="reportbody"> yadda1 yadda1 yadda1 </div> <div class="reportfooter"> footer 1 goes here </div> </div> <div class="reportcontainer"> <div class="reportbody"> yadda2 yadda2 yadda2 </div> <div class="reportfooter"> footer 2 goes here </div> </div> <div class="reportcontainer"> <div class="reportbody"> yadda3 yadda3 yadda3 </div> <div class="reportfooter"> footer 3 goes here </div> </div>