1

Alguém saberia como criar uma pagina que fique mais ou menos assim : 1 - Criar um cabeçalho e um roda pé e eles só fiquem na primeira pagina da impressão; Exemplo na imagem abaixo

[1] - https://i.stack.imgur.com/rn9Bc.jpg

2 - Criar um corpo para essa primeira pagina onde possa conter 1 ou duas colunas de questões; Exemplos imagens abaixo

[2] - https://i.stack.imgur.com/i5YKu.jpg [3] - https://i.stack.imgur.com/aYWDh.jpg

obs: somente a primeira página conterá cabeçalho e roda pé; obs2: quando for 2 (duas) colunas, só poderá ser incrementada na segunda, se a primeira chegar no final da pagina. Só passará para a segunda página se a segunda coluna for preenchida.

Tentei fazer com UL e Li só que o Ul divide as colunas

.columns {
  margin-top: 10px;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  height: 100%;
  float: left;
  position: relative;
  margin-right: 20px;
  list-style: none;
  font-size: 12px;
  width: 100%;
}
<ul class="columns">
  <li>Aqui teria uma pergunta, talvez uma imagem e teria as respostas (a,b,c,d,e).</li>
</ul>

1 Resposta 1

1

Tenho uma solução para seu problema. Não vou entrar em detalhes mais técnicos para não ficar muito extensa a resposta...

Primeiro, na página inicial, a barra no topo não tem segredo, pois ela é um elemento com position defaul e não se repete. Já o footer para aparecer só na primeira página vc tem que colocar position:absolute e bottom:0 para ficar no final da página. Como ele tb é um elemento único ele vai aparecer apenas na primeira página. (apenas elementos com position:fixed aparecem em todas as página na impressão). Beleza matamos a primeira página.

Repare que sem o break-inside: avoid; o browser tenta "dividir igualmente" o conteúdo metade em cada coluna. Se tiver 2 parágrafos vai ficar um em cada coluna.... Já com o break-inside: avoid; ele preenche toda uma coluna antes de ir para a outra caso não haja mais espaço na primeira coluna....

inserir a descrição da imagem aqui

Se a sua pagina tiver 1 Metro de comprimento ela ficaria assim, mas como é um A4, o próprio processo de impressão vai quebrar o conteúdo por página, mas a coluna de conteúdo continua seguindo o fluxo, primeiro preenche a coluna da esquerda, e só vai para coluna da direita se não houver mais espaço

inserir a descrição da imagem aqui

Nas páginas restantes vc vai te que usar um truque para que o conteúdo quebre conforme o desejado e esse truque é usando containers com break-inside: avoid;. Vc vai ter primeiramente um container pai com break-inside: avoid;, e dentro desse pai um container filho também com break-inside: avoid; isso vai fazer com que esse filho preencha toda uma coluna antes de começar na outra ao lado.

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Vc tb precisa tratar o @media print para que algumas coisas só se apliquem na hora da impressão, como por exemplo o position:absolute no footer, eu só aplico esse position quando o usuário manda imprimir, assim como o column-count: 2; para dividir o container pai em duas colunas.

Segue o código da imagem acima. OBS: Aqui eu diminui o tamanho do conteúdo para caber no snippet do site.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.barra {
    background-color: red;
    border: 1px solid #000;
}
.barra2 {
        border: 1px solid #000;
        background-color: green;
    }

@media print {
    @page {
        size: 210mm 297mm; /* tamanho equivalente ao A4*/
        /* size: A4; se vc preferir pode testar assim tb */
    }
    .container {
        column-fill: balance;
        column-count: 2;
        -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
    }
    .box, .debug-coluna {
        -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
    }
    .barra2 {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
}
<div class="barra">
    <h1>TOPO da Primeira pàgina</h1>
</div>
<div class="container">
    <div class="debug-coluna">
        <div class="box">
            <h2>Pergunta n1</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit voluptates qui amet illum ducimus, tempore temporibus, distinctio excepturi porro vitae exercitationem. Quisquam, consequatur repudiandae labore aut ex est repellendus pariatur?
            </p>
        </div>
        <div class="box">
            <h2>Pergunta n2</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit voluptates qui amet illum ducimus, tempore temporibus, distinctio excepturi porro vitae exercitationem. Quisquam, consequatur repudiandae labore aut ex est repellendus pariatur?
            </p>
        </div>
        <div class="box">
            <h2>Pergunta n3</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit voluptates qui amet illum ducimus, tempore temporibus, distinctio excepturi porro vitae exercitationem. Quisquam, consequatur repudiandae labore aut ex est repellendus pariatur?
            </p>
        </div>
        <div class="box">
            <h2>Pergunta n4</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit voluptates qui amet illum ducimus, tempore temporibus, distinctio excepturi porro vitae exercitationem. Quisquam, consequatur repudiandae labore aut ex est repellendus pariatur?
            </p>
        </div>
        <div class="box">
            <h2>Pergunta n5</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit voluptates qui amet illum ducimus, tempore temporibus, distinctio excepturi porro vitae exercitationem. Quisquam, consequatur repudiandae labore aut ex est repellendus pariatur?
            </p>
        </div>
        <div class="box">
            <h2>Pergunta n6</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit voluptates qui amet illum ducimus, tempore temporibus, distinctio excepturi porro vitae exercitationem. Quisquam, consequatur repudiandae labore aut ex est repellendus pariatur?
            </p>
        </div>
        <div class="box">
            <h2>Pergunta n7</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit voluptates qui amet illum ducimus, tempore temporibus, distinctio excepturi porro vitae exercitationem. Quisquam, consequatur repudiandae labore aut ex est repellendus pariatur?
            </p>
        </div>
        <div class="box">
            <h2>Pergunta n8</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit voluptates qui amet illum ducimus, tempore temporibus, distinctio excepturi porro vitae exercitationem. Quisquam, consequatur repudiandae labore aut ex est repellendus pariatur?
            </p>
        </div>
        <div class="box">
            <h2>Pergunta n9</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit voluptates qui amet illum ducimus, tempore temporibus, distinctio excepturi porro vitae exercitationem. Quisquam, consequatur repudiandae labore aut ex est repellendus pariatur?
            </p>
        </div>
        <div class="">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique placeat temporibus id, cupiditate perferendis distinctio impedit natus sit repellat aperiam eos laudantium sed explicabo assumenda tenetur sapiente nihil ullam illum doloribus eum voluptatem? Repellat a ratione quam aut laborum ipsa reiciendis doloribus rem iste, necessitatibus, sequi ipsum reprehenderit possimus deserunt veniam odio quas veritatis iure blanditiis nobis quia saepe magni perferendis hic. Architecto quibusdam amet ex sunt, totam laudantium doloremque, nemo, blanditiis quo laborum minima? Laborum ea, incidunt eaque voluptate dolor debitis quae exercitationem, consectetur, modi atque quia quisquam libero error cumque distinctio! Reiciendis iste impedit, quasi quo similique aut! Laborum molestiae voluptatem, eum perferendis voluptas deleniti nihil porro est, ducimus voluptatibus consequuntur dolores facilis nam alias sint cupiditate, dolore dolorum. Laboriosam vitae ea obcaecati molestiae! Expedita quaerat repudiandae sunt possimus, ipsam sint explicabo assumenda quibusdam ullam quas officia distinctio veritatis cumque. Velit aut harum at nam? Ex asperiores aspernatur quas. Earum corrupti nisi quisquam cupiditate? Officia quia reprehenderit asperiores ex incidunt similique beatae repellat sed deleniti vel delectus, odit nihil quam nulla iusto quos dicta quidem voluptate vero maiores ea fugiat quae est? Voluptatibus sit aliquam inventore voluptatem asperiores et nulla iure esse laudantium minima quisquam rerum illo maxime quae provident beatae doloremque debitis numquam dolorem laboriosam, consequuntur earum? Totam aliquid pariatur tempore, quo repellat optio nobis 
        </div>
    </div>
</div>
<div class="barra2">
    <h1>FOOTER da Primeira pàgina</h1>
</div>

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 .