Шаблон A4 CSS: не может продлить высоту DIV по всей A4-странице ⇐ Html

[Anonymous]

Я пытаюсь внедрить шаблон A4 с помощью CSS, который можно напечатать или сохранить как 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;
}

Этот шаблон имеет боковую панель, которая должна быть расширена по всему A4, однако, в моем случае боковая панель наследует высота текстового div с помощью падков:

i ' В.Е. пытался играть с различными свойствами, но оно оставляет пустое пространство (см. Скриншот), либо создает дополнительную пустую страницу. На перерыве страницы: < /p>

• Боковая панель появляется на каждой странице; < /li>
  Будет правильная нижняя прокладка, например, 20 мм;
• Текст будет автоматически перемещен на вторую страницу, если на первой странице нет достаточно места.

Подробнее здесь: https://stackoverflow.com/questions/794 ... re-a4-page