A4-Vorlage CSS: Die Höhe des DIV kann die gesamte A4-Seiten nicht verlängern ⇐ HTML

[Guest]

Ich versuche, eine A4-Vorlage mit CSS zu implementieren, die als PDF gedruckt oder gespeichert werden kann PrettyPrint-Override ">

Code: Select all

@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;
}

Diese Vorlage verfügt >

I ' Ich habe versucht, mit den verschiedenen Eigenschaften zu spielen, aber es hinterlässt entweder einen leeren Raum (siehe Screenshot) oder erstellt eine extra leere Seite. In der Pause der Seite: < /p>

• Die Seitenleiste erscheint auf jeder Seite; < /li>
  Es gibt eine ordnungsgemäße untere Polsterung, z. 20 mm;
• Der Text wird automatisch auf die zweite Seite verschoben, wenn auf der ersten Seite nicht genügend Platz vorhanden ist.