1

Meu css da estilo a uma div, como se fosse uma página A4

.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>

Mas eu gostaria que ao ultrapassar o tamanho máximo do conteúdo da div, ela me criasse uma nova "pagina"

Há alguma maneira que poderia fazer isso ? Pois eu não tenho como separar todo meu conteúdo em várias div

6
  • O conteudo é texto puro? ou estão agrupados em blocos? div(s), p(s), li(s), etc? Commented 13/03/2015 às 16:27
  • @TobyMosque o Conteudo tem div/p, etc, ele vem de uma estrutura gerada no CKEditor
    – Rod
    Commented 13/03/2015 às 16:30
  • Porque você precisa deste max-height? É para impressão?
    – Oeslei
    Commented 13/03/2015 às 16:53
  • Você precisa usar a propriedade page-break-inside do CSS. Dá uma olhada aqui
    – Franchesco
    Commented 13/03/2015 às 16:55
  • Acredito que o page-break e page-break-initial sejam considerados apenas na impressão (posso estar errado)...
    – Oeslei
    Commented 13/03/2015 às 16:58

1 Resposta 1

2

@Rod, realizei uma implementação aqui, no caso ele irá criar as demais paginas de acordo com a necessidade:

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

11
  • Por algum motivo, carregou tudo fora de ordem minhas páginas, kkk mas deu para ter uma ideia, irei dar uma testada
    – Rod
    Commented 13/03/2015 às 17:16
  • @TobbyMosque, ele separou as páginas mesmo, porém, ele gerou de forma invertida, gera a página primeiro, depois vem de trás para frente as páginas =/
    – Rod
    Commented 13/03/2015 às 17:21
  • @Rod, no Jsfiddle está funcionando normal. Commented 13/03/2015 às 17:44
  • repare depois do paragrafo que começa com a palavra "Donec", você verá que ele coloca a primeira página corretamente e as demais ficam de trás para frente
    – Rod
    Commented 13/03/2015 às 19:31
  • @Rod, foi um pequeno (grande) erro de logica. já o corrigi. Commented 13/03/2015 às 20:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .