如何解决HTML页面打印时底部出现多余空白区域的问题

你设置的min-height:100vh不生效的核心原因是：打印场景下vh单位对应的是屏幕视口高度，而非打印页面的实际高度，且普通样式的优先级低于打印媒体查询内的规则。
你可以按照以下步骤排查修改：

• 第一步：重置打印场景下的根元素默认样式
  大部分留白问题都是html、body自带的默认边距、高度规则导致的，在@media print中添加如下规则：

  html, body {
    height: auto !important;
    min-height: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }
  * {
    box-sizing: inherit;
  }
  

• 第二步：清除末尾元素的外边距，避免多余占位
  检查你页面最后一个渲染元素（比如你用到的table）是否自带默认的margin-bottom，在打印规则中添加：

  body > *:last-child {
    margin-bottom: 0 !important;
  }
  table {
    margin-bottom: 0;
  }
  

• 第三步：优化分页规则，避免触发空白分页
  你当前的tr { page-break-inside: avoid; }规则会让浏览器强制不拆分行，如果最后一行内容刚好超出当前页可容纳高度，浏览器会将整行挪到下一页，若剩余内容不足一页就会出现上页底部留白，可以调整分页规则如下：

  /* 全局禁止不必要的分页符 */
  * {
    page-break-after: avoid !important;
    page-break-before: avoid !important;
  }
  /* 仅保留表格行不拆分的规则，允许表格内部分页 */
  tr {
    page-break-inside: avoid;
  }
  /* 内容末尾禁止添加分页符 */
  body {
    page-break-after: avoid;
  }
  

• 第四步：排查是否有隐藏元素占位
  检查页面是否存在仅在屏幕端隐藏、打印时默认显示的占位元素（比如默认页脚、占位div），在打印规则中将这类元素设置为display: none即可。

修改后的完整打印CSS如下：

@page {
  margin: 3.5mm;
}
@media print { 
  html, body {
    height: auto !important;
    min-height: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
  }
  * {
    box-sizing: inherit;
    page-break-after: avoid !important;
    page-break-before: avoid !important;
  }
  table { 
    page-break-inside:auto;
    margin-bottom: 0;
  }
  tr { 
    page-break-inside:avoid; 
    page-break-after:auto; 
  }
  thead { display:table-header-group; }
  tfoot { display:table-footer-group; }
  body > *:last-child {
    margin-bottom: 0 !important;
  }
  /* 这里替换为你实际不需要打印的元素选择器 */
  .no-print {
    display: none;
  }
}

问题截图参考：

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