CSS实现A4打印模板：侧边栏无法铺满整页高度的问题求助

修改后的完整CSS代码 #

/* 基础样式重置与全局设置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font: 16pt "Segoe UI", sans-serif;
  width: 210mm; /* 修正A4尺寸：A4标准宽度为210mm，高度为297mm */
}

a {
  color: #185abd;
}

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

h3 {
  text-align: left;
}

img {
  display: block;
  margin: auto;
}

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

/* 打印专用设置 */
@media print {
  @page {
    size: A4 portrait; /* 明确指定竖版A4 */
    margin: 25.4mm 25.4mm 20mm 45.4mm; /* 左margin预留20mm侧边栏+25.4mm内容边距，底部保留20mm留白 */
  }

  /* 生成每页的全高橙色侧边栏 */
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 20mm;
    height: 100vh;
    background-color: orange;
    border-right: 0.01mm dotted #000;
  }

  .page {
    width: 100%;
    text-align: justify;
    text-justify: inter-word;
    padding: 0; /* 改用@page的margin控制内容边距 */
    page-break-inside: auto; /* 确保内容自动分页，避免截断 */
  }

  .sidebar {
    border: none !important; /* 打印时隐藏原边框，改用伪元素实现侧边栏 */
  }
}

/* 屏幕预览样式（与打印效果对齐） */
.page {
  box-sizing: border-box;
  padding: 25.4mm 25.4mm 20mm 45.4mm; /* 对应打印的页面边距 */
  text-align: justify;
  text-justify: inter-word;
  width: 210mm;
  min-height: 297mm; /* 预览时模拟A4页面高度 */
  margin: 0 auto 10mm; /* 预览时页面间添加留白 */
}

.sidebar {
  border-left: 20mm solid orange;
  border-right: 0.01mm dotted #000; /* 预览时用边框模拟侧边栏 */
}

关键修改说明 #

1. 修正A4尺寸错误：原代码将body宽度设为297mm（A4高度），调整为标准A4宽度210mm，从根源上解决布局错位问题。
2. 全高侧边栏实现：通过body::before固定定位伪元素生成侧边栏，position: fixed保证打印时每页都会渲染，height: 100vh确保铺满整页高度。
3. 分页与边距控制：用@page统一设置页面边距，底部预留20mm空白；page-break-inside: auto让内容自动流转到下一页，不会产生空页或截断内容。
4. 预览与打印样式统一：分别设置屏幕预览和打印的适配样式，保证两种场景下的视觉效果一致。

内容的提问来源于stack exchange，提问作者Mike