100vh div has half page height when printing pdf

Question

I set the div to be 100vh but when printing it's only half of the page. I tried adding media print but without changes. I've also tried to set height to 100% instead. In HTML works but not on 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

When defining objects in a PDF the units should be similar for X & Y (PDF is technically unitless). Thus best to use px for HTML. however we can use inches or mm for the media ratio such as 210 x 297 for A4.

The division to fully cover that page may be described as 100% of width thus in height that should be 141.421% same width units and for 2 pages it will be 282.842% of width. vh is not tied to vw for PDF /MediaBox viewport scale is only useful for a HTML screen.

@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>