Full height coloured columns with a footer
Hi, I need some help for what seemed to me like a relatively simple layout.
It features :
- A main content.
- A coloured side column that should run on the entire page height regardless of the number of pages.
- Each pages need to have the page number and the pages total.
My main grief is with the footer. I have a @page margin-bottom and set the @bottom to display the pages informations and added a coloured border to match the column width.
I thought this would be it… but the way PrinceXML handle page break creates a varying gap between the content and the footer (see attached captures).
Is there any way to prevent this ?
- Capture d’écran 2017-12-27 à 14.55.38.png 32.5 kB
- Capture d’écran 2017-12-27 à 14.55.47.png 21.8 kB
I found a way using a background SVG on @page but I still have a small gap between the content and the footer.
If you have a better solution I’m all ears.
Hi fdelaneau,
I am trying to solve the same problem. That's a brilliant solution using background SVG on @page. Were you able to find a way to close the gap between the content and the footer?
No, but I did not have much time to play with it since my initial tests.
I have yet to try using vh units but I think the problem is really nested in the way Prince XML handle the header and footer that is far from perfect.
I see. Thanks for getting back to me.
Hi,
Prince fragments the containing block where an unforced break occurs in the content, which can be above the bottom of the page if, for example, the page height is not a multiple of the line height. This is behaviour that various people have asked for, since it often looks better in the case that there is nothing in the footer for the block to join up with. Without seeing the source I can't be sure, but this might the cause of the problem you're having.
We'll have to think about what we might do to address your problem. Thanks for letting us know!
Hi Mark,
I think my initial post describes my goal rather accurately. I am looking for a way to stretch a coloured band from top to bottom including the header and footer areas.
It as little to do with the page break logic. It occurs even if the document has a single page.
Right now I have a background image (svg) that stretches along the all content height and is matched by a similar image in the header and footer.
Despite this, there is still a hairline gap between the different blocks.
- Capture d’écran 2018-05-22 à 14.01.48.png 40.6 kB
You can make one background image on the page extend into the header and footer regions, which should avoid any hairline gaps. Does that work for you?
