Skip to content

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.

css

/* 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 usemm, cm, in, pt. Works everywhere.How many pixels wide is an A4 page in a PDFpx in a paged context. Works everywhere.What DPI should images be for a PDFresolution. 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 CSSsize. Works in a browser-based render.Every property, with its support statusThe full reference, grouped by what part of the page it touches.

Paste the CSS and see what the rendered page does with it.

Try it live, no signup Try it in the playground