When establishing objects in a PDF, it is important to maintain consistency between the units used for X and Y (since PDFs are technically unitless). It is recommended to use pixels (px) for HTML, although inches or millimeters can be utilized for defining the media ratio, such as 210 x 297 for A4 size.
To fully cover a page, one approach could be to specify the width as 100%, therefore requiring the height to be 141.421% of the same width units. For double pages, the width should be set at 282.842%. The vh unit does not necessarily correspond with vw for PDFs; the MediaBox viewport scale is more relevant for HTML screens.
@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>
https://i.sstatic.net/LoNBD.png
https://i.sstatic.net/ffFit.png