Question

I’m converting an Access application to web, and need to print reports from it. These are letters mailed out and so the bottom of the letter, which is the ‘please return’ portion, will always be at the bottom of the page, regardless of how big the body of the letter is. I’ve used DIVs to lay out the letters and mimicked Access quite well, but I don’t know how to get each letter’s header at the bottom of its page. Using the CSS position: fixed; for the footer just makes every footer show up at the bottom of every page, and we would like to be able to print off multiple letters at once.

If I remove the fixed, it does display each footer on its own page, they weren’t aligned to the bottom of it.

Can I have my cake and eat it too? Doesn’t need to be cross-browser, and I’ll move to PDF if absolutely necessary, but what are my options in CSS/HTML? Somehow converting it all to a table and trying out tfoot? But will that enforce it to be at the bottom of each page?

Edit: A sample of the CSS/HTML:

.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 that level of control for printed material, you’re going to be fighting to get HTML to work across browsers and this is really what PDF is designed for.

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