I have a solution to your problem. I will not go into more technical details not to get too extensive the answer...
First, on the home page, the top bar has no secret, as it is an element with position defaul and does not repeat itself. Already the footer to appear only on the first page you have to put position:absolute and bottom:0 to stay at the bottom of the page. As it tb is a single element it will appear only on the first page. (only elements with position:fixed appear on every page in print). Beauty kill the front page.
Notice that without the break-inside: avoid; the browser tries to "divide equally" the content half in each column. If you have 2 paragraphs it will be one in each column.... Already with the break-inside: avoid; it fills an entire column before going to the other if there is no more space in the first column....
If your page is 1 meter long it would look like this, but since it is an A4, the printing process itself will break the content per page, but the content column keeps following the flow, first fills the left column, and only goes to the right column if there is no more space
On the remaining pages you will use a trick to break the content as desired and this trick is using containers with break-inside: avoid;. You will first have one container pai with break-inside: avoid;, and within that pai one container filho also with break-inside: avoid; That’s gonna make this one filho fill in one column before starting on the other next.
You also need to treat the @media print so that some things only apply at the time of printing, such as position:absolute in the footer, I only apply this position when the user has it printed, as well as the column-count: 2; to divide the container pai in two columns.
Follow the image code above. OBS: Here I decrease the content size to fit in the site snippet.
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>