Печать только полных DIV на странице

Question

У меня есть страница, на которой около 20 делений один под другим. то, что я хотел бы сделать, это напечатать страницу следующим образом:

• 4 делятся полностью на одной печатной странице.
• первая половина 5-го раздела печатается на странице 1, а вторая половина - на странице 2.
• это повторяется для всех 20 дел.
• я бы хотел, чтобы первые 4 деления были на странице одна и вторая страница для начала Div 5 и так один.

поэтому каждая напечатанная страница будет содержать только полные элементы div. также высота div не известна. поэтому на странице может быть 1 или 7 полных дел.

EDIT: Я перепробовал все варианты разрыва страницы и разрыва страницы

Answer 1

Не могу сделать это так, как вы хотите с помощью CSS. Для этого вам понадобится такая информация, как размер бумаги. page-break-inside - лучшее, что вы можете сделать, но это не гарантия.

Answer 2

Попробуйте свойство page-break-inside :

div {
    page-break-inside: avoid;
}

Answer 3

Возможно, вы сможете взломать что-нибудь вместе с javascript. Вы можете измерить offsetHeight и offsetTop каждого деления и сравнить это с ожидаемой высотой в пикселях каждой страницы. Вам нужно поэкспериментировать с разными высотами страницы, чтобы получить точное значение, но что-то вроде этого может работать:

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";
        }
    }
}