Units and measurement / vh and vw
What does 100vh mean in a PDF
Viewport units resolve against the render viewport, which in a paged context is one page. 100vh is the height of a page, not the height of the document.
What it is for
It is the reason a hero section sized at 100vh occupies exactly one page, and the reason a wrapper at min-height: 100vh on a document that already fills the page produces a blank page after it.
Support: Works in a browser-based render
They resolve, to the page dimensions. That is defensible and it is rarely what a layout copied from a website intended.
The syntax
Written the way it would appear in a document stylesheet, using vh and vw as intended.
/* A cover page that is exactly one page: this is the legitimate use. */
.cover {
height: 100vh;
display: grid;
place-items: center;
break-after: page;
}
/* A wrapper inherited from the web layout: remove it. On a full page it asks
for a page's worth of height that has to go somewhere. */
.page-wrapper {
min-height: 0; /* was 100vh */
}The mistake people make
min-height: 100vh on a content wrapper, which is standard in web layouts and produces a trailing blank page in almost every document that inherits it.
Frequently asked
Does vh and vw work when generating a PDF?
Works in a browser-based render. They resolve, to the page dimensions. That is defensible and it is rarely what a layout copied from a website intended.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
Which CSS units should a PDF use
mm, cm, in, pt. Works everywhere.
How many pixels wide is an A4 page in a PDF
px in a paged context. Works everywhere.
What DPI should images be for a PDF
resolution. Works everywhere.
How to use the @page rule for PDF output
@page. Works in a browser-based render.
How to set the PDF page size in CSS
size. Works in a browser-based render.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.