I'm not sure how I would do that. The content needs to be displayed in the footer area of the page in a format which is consistent with the other footers used earlier in the report. I'm using a set of nested <div>s with appropriate CSS commands to display the elements like this:
<div class="last-page-footer">
<div class="logo1"></div>
<div class="logo2"></div>
<div class="page-display"><span style="content: counter(page)"></span></div>
</div>
The CSS looks like this (this is SASS syntax):
.last-page-footer {
position: relative;
height: .85in;
.logo1 {
position: absolute;
left: 0;
top: 0;
height: 43px;
}
.logo2 {
position: absolute;
right: 0;
top: 9px;
height: 30px;
}
.page-display {
position: absolute;
right: 0;
top: 50px;
height: 12px;
color: #888;
}
}
And my current approach is to use a named 'page' for the display like this:
@page disclaimer {
margin-bottom: .9in;
border: none;
@bottom {
content: flow(last-page-footer);
}
}
Finally I have a <div> with a class which references the 'disclaimer' page and things display fine. The big problem, however, is that this causes the 'disclaimer' content to push to it's own page, which is not what the client prefers.
I'm not sure how to use a float to push the content that I need to go into the footer so that it is pinned to the bottom of the page and doesn't accidentally push on to the next page with no real content on the next page.
Suggestions are certainly welcome, otherwise I'll probably just suggest to the client that it would be best if their disclaimer information just started on a new page.
Thanks!
Jim