Widely availableSupported across all major browsers. Safe to use in production.
Other Widely available

Small, large, and dynamic viewport units

The sv*, lv*, and dv* CSS viewport units are relative to the smallest, largest, and current (dynamic) viewport size. They are used to size elements in relation to the viewport's dimensions.

Other

Overview

The sv*, lv*, and dv* CSS viewport units are relative to the smallest, largest, and current (dynamic) viewport size. They are used to size elements in relation to the viewport's dimensions.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.length.vb
108
108
101
15.4
108
15.4
CSS type
vi

`vi` unit
108
108
101
15.4
108
15.4
viewport percentage units dynamic

`dvb`, `dvh`, `dvi`, `dvmax`, `dvmin`, `dvw` units
108
108
101
15.4
108
15.4
viewport percentage units large

`lvb`, `lvh`, `lvi`, `lvmax`, `lvmin`, `lvw` units
108
108
101
15.4
108
15.4
viewport percentage units small

`svb`, `svh`, `svi`, `svmax`, `svmin`, `svw` units
108
108
101
15.4
108
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.hero {
  /* Covers the entire viewport even when the UI bar is displayed */
  min-height: 100svh;
}

.full-screen {
  /* Dynamically adapts to the viewport size */
  height: 100dvh;
}

.sticky-footer {
  /* Based on the maximum value when the UI bar is hidden */
  min-height: 100lvh;
}

Live demo

Svh(small-po-t)

Small/large/dynamic viewport units (svh, lvh, dvh) Svh(small-po-t) demo.

PreviewFullscreen

Dvh(dynamic-po-t)

Small/large/dynamic viewport units (svh, lvh, dvh) Dvh(dynamic-po-t) demo.

PreviewFullscreen

Lvh(big-po-t)

Small/large/dynamic viewport units (svh, lvh, dvh) Lvh(big-po-t) demo.

PreviewFullscreen

Use cases

  • Using Small, large, and dynamic viewport units

    The sv*, lv*, and dv* CSS viewport units are relative to the smallest, largest, and current (dynamic) viewport size. They are used to size elements in relation to the viewport's dimensions.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features