如何设置Div默认占满单页，防止打印时学生成绩单内容串页？

嘿，这个问题我之前帮好几个老师解决过！核心就是用CSS打印样式来锁定每个成绩单容器的页面占用，不管内容多寡都强制占一整页，避免内容“挤”到上一页里。

下面是具体实现步骤和代码：

核心思路 #

通过CSS的打印媒体查询和分页属性，给每个学生的成绩单容器设置固定的页面高度，并强制容器后自动分页，确保每个容器独占一页。

具体代码实现 #

假设你的每个学生成绩单容器的类是.student-transcript，可以添加以下CSS：

/* 屏幕显示用的样式（可根据你的页面需求调整，不影响打印） */
.student-transcript {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid #eee;
  background: #fff;
}

/* 专门针对打印的样式 */
@media print {
  /* 统一打印页面的尺寸和边距 */
  @page {
    size: A4; /* 可换成Letter等其他纸张尺寸 */
    margin: 1cm; /* 上下左右边距，按需调整 */
  }

  /* 强制每个成绩单容器占满一页 */
  .student-transcript {
    /* 计算容器高度：页面总高度减去上下边距之和 */
    height: calc(100vh - 2cm);
    /* 每个容器之后必须分页，确保下一个学生从新页开始 */
    page-break-after: always;
    /* 禁止容器内的内容被拆分到两页 */
    page-break-inside: avoid;
    /* 去掉打印不需要的样式 */
    margin: 0;
    padding: 0 1cm; /* 可以保留内边距，让内容和页边距对齐 */
    border: none;
  }

  /* 隐藏页面上不需要打印的元素，比如导航栏、操作按钮等 */
  .navbar, .print-btn {
    display: none;
  }
}

关键属性解释 #

• @media print：这个规则里的样式只会在打印预览或实际打印时生效，不会影响网页的屏幕显示。
• @page：定义打印纸张的大小和边距，保证所有页面的布局一致。
• height: calc(100vh - 2cm)：这里的100vh在打印时代表单页的高度，减去上下边距的总和（1cm*2），让容器正好填满一页的可用空间。
• page-break-after: always：这是最关键的属性！它会强制在每个成绩单容器的末尾插入分页符，确保下一个学生的内容绝对不会跑到上一页里。
• page-break-inside: avoid：防止单个成绩单的内容被拆分到两页，如果你的成绩单内容偶尔超过一页（比如科目特别多），这个属性会自动把超出的内容推到下一页。

测试小技巧 #

一定要用浏览器的打印预览功能（Ctrl+P）来测试效果，因为屏幕显示的样式和打印样式是分开的。如果不同浏览器（比如Chrome、Firefox）的预览效果有差异，微调一下@page的边距或者容器的height值就能适配。

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