A4 Template CSS: can't extend the div's height through the entire A4-page

Question

I'm trying to implement an A4 Template with CSS, which can be printed or saved as PDF: https://jsfiddle.net/me9ytfd5.

@media print {
    @page {
        size: A4;
    }

    .sidebar {
        border-right-width: 0 !important;
    }
}

a {
    color: #185abd;
}

body {
    font: 16pt "Segoe UI", sans-serif;
    margin: 0;
    width: 297mm;
}

h1 {
    font-family: "Segoe UI Light", sans-serif;
    text-align: initial;
}

h3 {
    text-align: initial;
}

img {
    display: block;
    margin: auto;
}

li {
    margin-bottom: 3mm;
    text-align: initial;
}

.page {
    box-decoration-break: clone;
    box-sizing: border-box;
    padding: 25.4mm;
    text-align: justify;
    text-justify: inter-word;
    width: 100%;
}

.sidebar {
    border-left: 20mm solid orange;
    border-right: 0.01mm dotted #000000;
}

This template has a sidebar, which should be extended through the entire A4, however, in my case the sidebar inherits the height of the text div with paddings:

I've tried to play with the different properties, but it's either leaves an empty space (see screenshot) or creates an extra empty page.

Important: the template can contains multiple pages and it's crucial that at the page's break:

• The sidebar appears on every page;
• There will be a proper bottom padding, e.g. 20 mm;
• The text will be automatically moved to the second page if there is no enough place on the first page.

Answer 1

Is that what you want?

Note: you have to make the sidebar a separate element so just put it at the very top or at the very end but do not wrap anything inside it.

Example:

<!-- This div is on it's own -->
<div class = "sidebar"></div>
<div class = "page">
    <p>Lorem ipsum dolor sit amet, consetetur...

@media print {
    @page {
        size: A4;
        margin: 0;
    }

    .sidebar {
        border-right: none;
    }
}

a {
    color: #185abd;
}

body {
    font: 16pt "Segoe UI", sans-serif;
    margin: 0;
    width: 297mm;
}

h1 {
    font-family: "Segoe UI Light", sans-serif;
    text-align: initial;
}

h3 {
    text-align: initial;
}

img {
    display: block;
    margin: auto;
}

li {
    margin-bottom: 3mm;
    text-align: initial;
}

.page {
    box-decoration-break: clone;
    box-sizing: border-box;
    {/* Adjust the last (left) padding to your liking */}
    padding: 25.4mm 25.4mm 25.4mm 40mm;
    text-align: justify;
    text-justify: inter-word;
    width: 100%;
}

.sidebar {
    width: 20mm;
    background: orange;
    border-right: 0.01mm dotted #000000;
    height: 100vh;
    position: fixed;
}

Explanation: First of all, wrapping everything in the sidebar is not the best idea, better to make it a separate "decorative" element, so it does not affect the rest, and the rest does not affect it. Then, position fixed is what will make it appear on every page. You just have to adjust the left padding of the text to make it look like you want. I also used width instead of border and used a background property for the color but this is not necessary for the trick to work.

On my print window, it is showing the sidebar taking the whole height and if I add more text, it'll create other pages with the same sidebar. The 100vh is setting it's height to the whole view.