Unit Rulebook

Type a unit, or a word from its description.

    vh

    1% of the viewport's height.

    Safe to useBaseline: widely available

    First version with support, from MDN browser data
    BrowserSince
    Chrome20+
    Chrome Android25+
    Edge12+
    Firefox19+
    Firefox Android19+
    Safari6+
    Safari iOS6+

    Formula 1vh = 1/100 of the viewport height (the large viewport)

    How it works

    1vh is a hundredth of the viewport height: 8px in a window 800px tall. It is the oldest of the height units, and the full-height opening section is its classic use. The common mistake is to put a header above it: a section with min-block-size: 100vh under a header of its own is the header’s height taller than the window, 860px under a 60px header in an 800px window, so a vertical scrollbar appears for no good reason.

    The viewport belongs to the document that holds the unit. Inside an iframe, 100vh is the height of the frame and not of the outer window, which is how the demos on this site can show units honestly without faking a window.

    Plain vh is defined in terms of the large viewport, the one with retractable toolbars pulled away; the specification asks for this for web compatibility. Where a browser has such toolbars, a block set to 100vh is therefore taller than the visible area while they are shown, and its bottom edge sits under them. That comes from the definition. This site measured in a desktop window, where 50vh and 50lvh came out the same, and has not watched a phone. The svh and dvh units exist for the case the definition leaves open.

    Try it

    Viewport units for a window of your choice

    Enter a window size, or take the one you have. Ten of each unit comes out as a tenth of the width, the height, the shorter side or the longer one.

    10vw
    128px
    10vh
    80px
    10vmin
    80px
    10vmax
    128px

    On a desktop window svh, lvh and dvh give the same numbers as vh. They differ only while a phone browser shows or hides its toolbars, which this page cannot show.

    The same as a table
    Ten of each viewport unit in two windows
    UnitLaptop, 1280 by 800Phone, 390 by 844
    10vw128px39px
    10vh80px84.4px
    10vmin80px39px
    10vmax128px84.4px

    What changes it

    Moves with
    • the window size
    Stays put under
    • the reader's text size
    • page zoom
    • the font in use
    • the query container
    • phone toolbars
    • the writing mode

    Reach for it when

    Full-height panels and height floors on desktop, where no toolbar comes and goes.

    Watch out

    Plain vh follows the large viewport, the size with retractable toolbars pulled away. Where a browser has such toolbars, a 100vh block is taller than the visible area while they are shown, so its bottom edge sits under them.

    Example Under a 60px header, a 100vh section makes the page 60px taller than the window. Take the header off.

    Before

    .opening {
  min-block-size: 100vh;
}

    After

    .opening {
  min-block-size: calc(100vh - var(--header));
}
    • vw1% of the viewport's width.
    • dvhA hundredth of the visible height, following the toolbars as they show and hide.
    • vbA hundredth of the viewport along the block axis, the direction lines stack in.
    • cqhOne percent of the nearest query container's height.

    MDNSpecification