CODEWITHSUNDEEP
htmlcssprinting
Andrew
Andrew

Reputation: 5223

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

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>

Upvotes: 7

Views: 3174

Answers (2)

Jay Media
Jay Media

Reputation: 21

Try this. I've had to figure out a lot of html printing lately as well. You can figure out how you want to replicate the divs, either backend or using jquery cloning for each report. Borders are just to 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>

Upvotes: 2

Samuel Neff
Samuel Neff

Reputation: 74949

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.

Upvotes: 1

Related Questions