Render whole div in one page using renderAs PDF

Question

I'm trying to create a page that will be rendered as PDF to the user, and this page is supposed to display a document that has a text that can change depending on what is typed on a rich field text on my custom object.

This document has a text header that doesn't change, and a text that can change, and footer that has the user's digitalized signature and some other information.

1. Text header
2. Text body
3. User signature and additional information

On the example A we have the case in which the text is small enough that the three parts can fit in a single page. No big deal. On example B we have the situation in which the text is bigger, but the signature appears on the second page. No problem either.

The issue here is when the text occupies enough space on the page to break the signature and informations on both pages. I would like this not to happen, and this part 3 to be always thrown to the next page if it cannot fit on the current page.

Is this achievable with the renderAs attribute? Using CSS maybe?

Answer 1

This should work for you:

@media print  
{
    div{
        page-break-inside: avoid;
    }
}