I'm thinking with all the people using PrinceXML to publish papers, someone is bound to have figured this one out.

When a section ends before the bottom of a page and I want to force the next section to begin on the following page, I want to use the remainder of the page as a place for participants to take notes (lined paper). Something like this:


<Section 1 end>
Notes: ______________________
____________________________
____________________________
<page break>
<Section 2 begins>

I've tried many workarounds for this, trying to make the <div> with a variable height to properly fill out the balance of the page before the page break and nothing seems to work.

Thoughts?

CSS doesn't have an "expand-to-fit" option like the one you request. The only solution I can think of that would work in Prince6 is to have a background image that would be revealed when areas on the page are left unfilleded. Something along the lines of:

body { background-image: url(stripes.png) }
h1, h2, h3, p { background: white }

By setting spacing between the elements as padding instead of margins, you should be able to cover most areas where you don't want to see stripes.

A solution without background images:

Place a <lines> element as last element of <section> and fill it with as many <b> elements as you need lines at the most. From there one, all you need is the right CSS. If you apply position:absolute to <lines> then it - and its content - will not be moved to the next page, even if it exceds the available space. I guess this is the most important point of this solution - the rest can be solved in several ways. See my code example below.

<style type='text/css'>
div.section{page-break-before:always;}
div.section div.lines{width:100%;display:table-cell;position:absolute;}
div.section div.lines b{width:100%;display:inline-block; height:1.5cm;border-bottom:1px red solid;}
</style>
<div class='section'>
   <h2>Header</h2>
<p>Her goes your text. Before notes starts below:</p> 
<div class='lines'>
<b>Notes: </b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b></div>
</div>
<div class='section'>
   <h2>New header</h2>
   <div class='lines'>
   <b>Notes: </b><b></b><b></b><b></b><b></b><b></b>
   <b></b><b></b><b></b><b></b><b></b><b></b><b></b>
   <b></b><b></b><b></b><b></b><b></b></div>
</div>

leif