Printing only full DIVs on a page

Question

I have a page that has about 20 divs one under the other on it. what i'd like to do is to print the page like this:

• 4 divs go fully on one printed page.
• the first half of 5th div gets printed on page 1 and the other half on page 2.
• this repeast for all 20 divs.
• i'd like to have first 4 divs on page one and the 2nd page to start with div 5 and so one.

so each printed page would contain only full divs. also the div height is not known. so there can be 1 or 7 full divs per page.

EDIT: I've tried all page-break-before and page-break-inside options

Answer 1

Try the page-break-inside property:

div {
    page-break-inside: avoid;
}

Answer 2

Can't do it exactly the way you want with CSS. To do that you would need information like paper-size. page-break-inside is the best you can do, but its not a guarantee.

Answer 3

You might be able to get something hacked together with javascript. You could measure the offsetHeight and offsetTop of each div, and compare that with the expected height in pixels of each page. You'd have to experiment with different page heights to get it exact but something like this might work:

function paginateDivs() {

    var pageHeight = 800; // Experiment with different values here, this
                          // is 800 pixels.
    var lastPage = 0;

    var divs = document.getElementsByTagName("div");

    for (var i = 0; i < divs.length; i++) {
        var divBottom = divs[i].offsetTop + divs[i].offsetHeight;
        if (divBottom - lastPage > pageHeight) {
            lastPage = divs[i].offsetTop;
            divs[i].style.pageBreakBefore = "always";
        }
    }
}