100vh div打印pdf时有半页高

Question

我将 div 设置为 100vh，但打印时只有页面的一半。我尝试添加

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>

Answer 1

在 PDF 中定义对象时，X 和 Y 的单位应该相似，因此最好对 HTML 使用 px，但是我们可以使用英寸或毫米作为介质比例，例如 A4 的 210 到 297。完全覆盖该页面的划分可描述为宽度的 100%，因此高度应为宽度的 141.421%，对于 2 个页面，高度应为宽度的 282.842%。 vh 与 PDF 的 vw 无关/MediaBox 仅对 HTML 屏幕有用。

@media print {
@page { size: A4;
  margin: 0;
}
}
html,
body {

  margin: 0;
  position: relative;
}

.pageDiv {
  background-color: red;
  height: 141.421vw;
  width: 100vw;
}

<div class="pageDiv">Hello World!</div>