打印网页时如何实现半页分隔，将重复表单放在同页下半部分？

核心实现逻辑是通过打印媒体查询强制指定两个表单容器的高度为打印页的半高，无需使用分页符即可实现同页上下分区展示。

实现步骤 #

• 给两个表单分别套上独立的外层容器，指定类名比如print-form-block，第二个表单可以额外加second-form类用于区分样式调整
• 新增打印专用CSS规则，固定每个容器高度为打印页可用高度的一半

代码示例 #

@media print {
  /* 配置打印页基础边距，避免高度计算偏差 */
  @page {
    margin: 1cm;
    size: A4 portrait; /* 固定为A4竖版打印，可按需修改 */
  }
  /* 半高表单容器规则 */
  .print-form-block {
    height: calc((29.7cm - 2cm) / 2); /* A4总高度29.7cm，减去上下各1cm边距后取半 */
    box-sizing: border-box;
    page-break-inside: avoid; /* 禁止单个表单内部被拆分到不同页面 */
  }
  /* 可选：给第二个表单加上边距，和上方表单拉开间隔 */
  .print-form-block.second-form {
    padding-top: 1cm;
    border-top: 1px dashed #999; /* 可选：加分隔线区分上下两个表单 */
  }
  /* 隐藏不需要打印的页面元素，例如提交按钮、导航栏等 */
  .no-print-element {
    display: none;
  }
}

注意事项 #

• 优先使用物理单位cm/mm定义高度，相比vh单位在不同浏览器打印场景下的适配稳定性更高
• 可以通过浏览器打印预览功能实时调整高度数值，适配不同的表单内容长度
• 不要使用page-break-after: always这类强制分页规则，否则会导致第二个表单跳转到下一页展示

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