I have a page with a title and a variable height table (with outside border to display as a box). I then need a second box around the remaining content on the page, but I need the box to always draw to the bottom of the page regardless of the actual content.

Attached is an example. Works fine on browsers (filling a fixed height div), but Prince will only draw the box around the actual content.

How to achieve this in Prince?

thanks
David

1. section2example.zip‎ 22.5 kB

A further complication. I've just been informed that the content in the second box may wrap across multiple pages. Each page repeats the header and first table. The second box being consistently sized the same on every page, the content obviously just flowing across pages. Also all but the last page have a "/CONTINUED...." at the bottom.

Okay I have all my other issues sorted out. I still have the original question to solve.

Attached is an updated example. I've put a red border around the page content area to show that the bottom box is obviously not extending down to the bottom of the page content area.

Does anyone have an idea how to make the box fill the page? Any help would be really appreciated.

thanks
David

1. section2example2.zip‎ 27.6 kB

Hi damartin,
it can be surprisingly hard to achieve "fill whatever random amount of space is available" - layouts, I suppose this has to do with Prince's lack of so-called reflow and the problem that trying to express something like this in CSS might cause never-ending layout loops. However, I have found a workaround you might try.

Generally, I suggest that you set border-bottom, border-left and border-right in the @page - rule, and border-top in the #section2_bottom rule. You will now have solved the problem with the box not extending to the bottom of the page. However, you now have a new problem: the left and right borders for the page area will extend upwards above the top border of section2.

To mask this, you can make the top elements on the page ever so slightly wider, give them a background colour and position them to overlay the undesirable borders. For example add something like

#section2_head {
	width: 188mm;
	margin-left: -1mm;
	background-color: #fff;
}
.line_after {
	background: #fff;
	width: 101%;
	margin-left: -0.5%;
}

(experimenting with different units just to try to explain the concept..)

If you find it is too jarring that the header parts might be 1mm or so too far left, you may have to experiment with padding on TABLE, TR or THEAD - not sure what Prince supports here but I think the approach can deliver the effect you want although it is a bit of a hack.

Announcement: repos for tests/utils

Hi hallvord,

thanks for taking the time to help. I was contemplating whether something along these lines would work.

After a bit or trial and error I did get it working. A few extra complications to work around. As this is only part of a complete document I couldn't add the border to the @page rule, but adding it to the section div and setting a fixed height for the div worked. Also I've got an image background, but fortunately that area on the image is a solid colour which I could match. last issue was I'm mixing px and mm units so it also took a little tweaking, generally setting the border width a bit thicker for the top sections just to make sure it covers the bits of border I didn't want to display.

Thanks again for the help.

David