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

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

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.



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>