Break div when content exceeds maximum size

Question

My style css to a div, like an A4 page

.pagina {
    width: 210mm;
    min-height: 297mm;
    max-height: 297mm;
    padding: 30mm 20mm 20mm 30mm;
    margin: 10mm auto;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}

<div class="pagina"> CONTEUDO </div>

But I wish that by exceeding the maximum size of the content of div, she created me a new "page"

Is there any way I could do it ? Because I have no way to separate all my content into several div

Answer 1

@Rod, I performed an implementation here, in case it will create the other pages according to the need:

var paginaAtual = document.querySelector(".pagina");
var book = document.querySelector(".book");
var millimeter = 3.779527559; //1mm = 3.779527559 pixel

var getHeight = function (elem) {    
    return Math.round(elem.offsetHeight / millimeter);
}

var addPage = function () {
    var page = document.createElement("div");
    page.classList.add("pagina");
    book.appendChild(page);
    return page;
}

var ultimaPagina = null;
var largura = getHeight(paginaAtual);
if (largura > 297)
    ultimaPagina = addPage();

while (largura > 297) {   
    var lastNode = paginaAtual.childNodes[paginaAtual.childNodes.length - 1];
    ultimaPagina.insertBefore(lastNode, ultimaPagina.firstChild);
    
    largura = getHeight(paginaAtual);
    if (largura <= 297) {
        paginaAtual = ultimaPagina;
        largura = getHeight(paginaAtual);
        if (largura > 297)
            ultimaPagina = addPage();        
    }
}

body {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: gainsboro;
    padding: 0px;
    margin: 0px;
}

.pagina {
    width: 210mm;
    min-height: 297mm;
    padding: 30mm 20mm 20mm 30mm;
    margin: 10mm auto;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);    
    box-sizing: border-box;
}

<div class="book">
    <div class="pagina">
        <p>
        Fusce viverra sed nisl a pharetra. In feugiat urna eget accumsan cursus. Donec in tincidunt quam, aliquam varius quam. Donec id pharetra purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ultricies in quam ut imperdiet. Aliquam risus dolor, facilisis ac metus eu, dignissim dignissim ligula. Aenean gravida bibendum quam ut rhoncus. Etiam scelerisque eros eget ante ultrices tristique. Donec quis tortor magna. Etiam in nisi eget risus aliquam vestibulum ac vel nisl. Maecenas sit amet sem ornare, faucibus orci sit amet, maximus sapien. Nulla nec ex id nulla luctus elementum eu sit amet risus. Suspendisse blandit scelerisque elit et consequat. Nulla congue est et mi dictum porta.
        </p>
        <p>
        Suspendisse sed gravida nulla. Vestibulum a tempor tellus. Nullam blandit diam eu eros mattis, vel ultricies urna venenatis. Donec ut lectus molestie, lacinia dui ac, malesuada diam. Maecenas at pretium odio. Donec enim magna, congue sit amet molestie vel, efficitur a nibh. Vivamus neque sem, porttitor at leo at, ultricies lobortis nisl. Maecenas quis tortor vitae magna malesuada faucibus. Nunc congue, magna a molestie pulvinar, mi nibh tempus lacus, at tincidunt nibh nulla vitae lacus. Fusce purus augue, vestibulum vel venenatis sit amet, vulputate a purus. Cras id dolor bibendum, rutrum enim eget, ornare erat. Cras vel lectus eget turpis malesuada tincidunt.
        </p>
        <p>
        Aliquam maximus ante ut sodales vestibulum. Sed sit amet eros nec nulla rhoncus gravida. Praesent eleifend elementum mi, ac porta mauris dapibus sit amet. Maecenas id urna venenatis, viverra nisl et, finibus quam. Nam augue ligula, elementum laoreet nisi porta, dignissim dignissim diam. Suspendisse scelerisque laoreet mauris vitae elementum. Fusce in ante elementum, vulputate urna vehicula, faucibus sapien. Aenean dignissim vestibulum ligula sed rutrum. Sed sed placerat ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ut malesuada mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sit amet feugiat felis, et facilisis neque.
        </p>
        <p>
        Maecenas vel hendrerit dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ut iaculis nibh. Curabitur porta feugiat sapien et auctor. Quisque vel sodales est. Aenean dui ligula, sodales a tristique ac, ullamcorper a elit. In sagittis vel odio sed euismod. Fusce vitae mi commodo, aliquet felis sit amet, auctor orci. In id sapien rhoncus, fermentum nunc a, luctus quam. Donec ut risus nibh. Proin id massa suscipit, euismod eros vel, auctor est. Nunc sapien lacus, rutrum eu diam id, semper ornare diam. Ut nec neque semper, venenatis leo vitae, vulputate mi. Sed vehicula orci sit amet malesuada pellentesque.
        </p>
    </div>
</div>

JSFIDDLE