Chrome 108新版本打印应用时出现多余空白页的解决方法

• 替换原有打印样式中的height:100vh为height:100%，同时给核心容器添加分页控制：

  @media print {
      html, body {
          height: 100% !important;
          margin: 0 !important;
          padding: 0 !important;
          overflow: hidden !important;
      }
      .core-module-container { /* 替换为你项目的核心容器类名 */
          page-break-after: avoid;
          page-break-inside: avoid;
      }
  }
  

• 强制清零所有元素的底部边距和内边距，避免内容溢出：

  @media print {
      * {
          margin-bottom: 0 !important;
          padding-bottom: 0 !important;
      }
  }
  

• 调整Chrome打印设置：打开打印预览界面，点击「更多设置」，将「边距」设置为「无」后再打印。
• 排查核心模块中的动态内容：确保打印前所有异步加载的元素已完全渲染，避免动态高度导致页面计算异常。

原有代码在单页有效但核心模块失效，大概率是因为核心模块存在多层嵌套容器、继承样式冲突或动态内容，100vh在打印环境下无法准确约束整体页面高度。

内容的提问来源于stack exchange，提问作者Büşra Güler