I have an editable website:
<body contenteditable="true">
...
</body>
that shows a view like the one in the following image
the blue box is a div son of body, the black line is bound between two pages (when it is printed).
PROBLEM: When editing the div, for example adding line breaks by pressing the ENTER key the div resizes, if the div grows so much as to occupy the next page then the entire div (at the time of printing) goes to the next page leaving a blank space on the first page.
The unwanted exit I have is like this:
What I need to do is that when the div is printed it breaks and part of what the div has is at the end of the first page and the other part at the beginning of the next page.
IMPORTANT: I want to know if there is a solution with CSS, I could make a script that modifies the html to do what I need but if it is possible to do it with styles I would appreciate someone to let me know.