Forum How do I...?

Row at page bottom which will be moved to next page

pestafo
Hi,

Is there a way to have a row at the bottom of the page which will be moved to the next page if it together with the rest of the content does not fit onto the first page?

In other words having content which grows from the page top and such which grows from the page bottom. If they together are higher than the page an overflow onto the next page should occurs.

Thanks for your support.
mikeday
That's a very tricky question! The closest I can get so far is with this markup:
<table border="1" style="height: 22.7cm">
<tr>
<td valign="top">
ABC
</td>
</tr>
<tr style="page-break-inside: avoid">
<td valign="bottom">
DEF
</td>
</tr>
</table>

You need to adjust the height specified on the table so that it is just as tall as the page. Is this similar to what you are looking for?
pestafo
Yes, it covers one part of my problem - the page fills from top and bottom. The oder point is, that there should only be a page break if the top and bottom part (text) together are to high for one page.

With the code above the two rows have the same height (1/2 table height) and as soon as the content of one, regardless of the fill state of the other, exceeds the rows height a page break is done. This way the empty page space of the second row is lost.

I am looking for a solution which allows for example 20/80% as well as 80/20% page filling from top/bottom without a page break. This way the page space can be used up to 100% regardless if there is more text on top or bottom. But it is still important that a page break occurs if 100% is exceeded.
mikeday
At the moment I'm not sure if it's possible to do that with CSS. Using absolute positioning could get you the 80/20 split, but there would be no page breaks if the content was too big. You can almost do it with page floats:
<div style="float: top; border: solid red thin">
abc
</div>
<div style="float: bottom; border: solid red thin">
def
</div>

However, after the page break the float will appear on the bottom of the next page, and I'm not sure if that's what you want.
pestafo
Great, that seems to do the trick. The result of the first test showed exactly what we were looking for. I was not aware that prince accepts 'top' and 'bottom' as values for 'float'. That, after the page break the float will appear on the bottom of the next page is perfect!

Thanks a lot for your very helpful support.