Forum How do I...?

Make an element fill remaining vertical space

thespacecamel
Let’s say I have a header and then an image: I want to make the image take up the *remaining* vertical space. If the image were the only thing on the page, I’d just set its height to 100 vh. But the text above it could be any size (it could be multiple lines), so it’s not so easy.
More generally, say I had several paragraphs of text followed by an image. I’d again like that image to take up whatever remaining vertical space is available on the page it was placed on (and probably put a minimum height too). Is this possible with prince?
mikeday
That sounds a bit tricky, if the image exceeds the minimum height should it be pushed to the next page or disappear entirely?
thespacecamel
I imagine a case for both making the image disappear or getting pushed to the next page.

Books sometimes include a decorative image at the end of chapters to avoid having a ton of empty space on the chapter's last page before the next chapter starts on the next page.

In order to do that, I'd add an image at the end of the chapter, set it to fill the remaining space on the page unless it will be less than a quarter of the page's size, in which case I'd like it to disappear entirely.

(Edit: I think I might be able to do this with prince-float-tail: fill-page, right?)

On the other hand, I could have an important image I want to stay in the same place relative to the surrounding text (so I don't want it to float to the start of the next page if it won't fit), but I also want to avoid having a lot of empty space in case the image needs to be pushed to the next page.

In order to do that, I'd like to set the image to occupy the remaining space on the page and be at least 1/4 of the page tall, otherwise push it to the next page.

Do those two cases make sense?

The more I deal with people who're indirectly using Prince, the more I see: they want to avoid whitespace at the end of the pages AND they want their images to maintain order with its surrounding text... I think the only way to do that is to make the images' height dynamic, relative to the remaining space on the page.

I suspect this isn't possible currently, but maybe it's a good feature request?

Edited by thespacecamel

thespacecamel
Asked a related question in the "How do I..." forum and got a solution that will accomplish this using the Javascript box API: https://www.princexml.com/forum/topic/4673/what-is-the-best-way-to-reduce-whitespace-before-images?p=1#23549