设置为100vh的div打印PDF时仅显示半页高度的问题

问题 #

将div元素设置为100vh高度，但打印生成PDF时它仅占页面的一半。尝试添加@media print规则调整但无效果，也试过将高度改为100%，该设置在HTML页面中正常生效，但在PDF中仍无法达到预期效果。

相关代码如下：

html,
body {
  height: 100%;
  margin: 0;
  position: relative;
}

.page100vh {
  background-color: red;
  height: 1000vh;
  width: 100vw;
}

@media print {
  .page100vh {
    height: 100vh;
  }
}

<div class="page100vh"></div>

打印PDF时，红色div仅显示为页面高度的一半。

解决方案 #

打印PDF时，浏览器打印引擎对vh单位的解析逻辑和屏幕渲染不同，且默认页面边距、html/body的高度设置会干扰最终效果。可通过以下CSS修改解决：

html,
body {
  height: 100%;
  margin: 0;
  position: relative;
}

.page100vh {
  background-color: red;
  height: 1000vh;
  width: 100vw;
}

@media print {
  /* 移除PDF页面默认边距 */
  @page {
    margin: 0;
  }
  /* 确保html和body占满打印页面 */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  /* 强制div覆盖整个打印页面 */
  .page100vh {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }
}

关键调整说明 #

• @page { margin: 0; }：清除PDF页面默认的边距，避免div被留白挤压
• 重置html和body的内外边距：保证高度能被正确传递给子元素
• 给.page100vh添加固定定位：强制元素从页面左上角开始，覆盖整个打印区域，同时用height: 100%适配页面高度

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