Hi,

I have a page of dynamic content of arbitrary length, followed by another similar page. I want to ensure that each page is no more than one page, and that any further content that would otherwise be on it is just cropped.

Something, in theory, like:

<div id="page1">Page one content, should be cropped after 1 page</div>
<div id="page2">Page two content, should be cropped after 1 page</div>

#page1, #page2 {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

Does anyone have any suggestions to make this work?

I did it by forcing the height of #page1 to 257mm (A4 less 20mm top and bottom margins), but if there is a cleaner way that would be appreciated.

If I recall correctly, "height: 100%" will only have the desired effect if all the ancestor elements also have fixed height, for example specifying "height: 100%" on the html and body elements. Does this help?