Forum How do I...?

Multiple Footer Positioning Issue

sensei888
Hi,

I wish to have two different sized footers in my PDF. I have achieved this using the css below.

The problem however, is that the footer on the last page is actually touching the bottom of the visible page, or in other words there is not enough bottom margin on the last page.

My question is how can I get these two different sized footers to sit at the same distance from the bottom of the page? Or how can I move the footer on the last page up a bit?


		@page {
			size: a4;
			margin: 3cm 2cm 3cm 2cm;
			padding: 2cm 0 2cm 0;

			@top {
				content: flow(header);
			}

			@bottom {
				content: flow(footer);
				border:1px solid #00CC33;
			}
			
		}
		
		#header {prince-flow: static(header);}
		#footer {prince-flow: static(footer);}
		#footer_last {prince-flow: static(footer);}



I thought that if I put 'margin-top:-2cm" for the '#footer_last' div it would actually move the footer up a bit, but it doesn't.

Would appreciate some help.
mikeday
A quick workaround is to add a <div> inside the footer that wraps up all the content and apply the negative margin-top to that, which should work fine.
sensei888
mikeday wrote:
A quick workaround is to add a <div> inside the footer that wraps up all the content and apply the negative margin-top to that, which should work fine.


Thanks for your reply Mikeday...do you mean something like this below>?

     <div style="margin-top:-14cm">
       <div id="footer_last"><img src="../img/pdf_only/GCIT_details2.jpg" alt="Page footer" /> </div>
    	</div>


This doesn't seem to do anything. Only setting the margin on the @bottom will seem to move this footer up...but as I stated this before this is undesireable as the alternate footer on all the other pages will move up the page too far.

There must be something obvious that I am missing that will make this footer on the last page move...
mikeday
Actually I meant to put the new <div> inside the footer div.
sensei888
mikeday wrote:
Actually I meant to put the new <div> inside the footer div.


Ah I see, I knew it was something obvious. Thanks for your help, the code below moves the footer around fine:

<div id="footer_last"> <div style="margin-top:-2cm"><img src="../img/pdf_only/GCIT_details2.jpg" alt="Page footer" /></div> </div>
hmcMikeJ
I just tried the solution & it works fine as long as the content on the page does not need the space that the negative top margin of the footer claims. If it does then the content & the footer collide. I then tried defining new margins for the last page content & unfortunately this won't work either as it creates a page break. Any ideas would be greatly appreciated.