100vw

100vw is a CSS length value that represents the full width of the viewport. The unit vw stands for viewport width, with 1vw equal to 1% of the viewport’s width. Therefore, 100vw corresponds to the entire width of the viewport, independent of the containing block.

It is commonly used to create elements that bleed to the edges of the screen, such as full-width banners, hero sections, background layers, and overlays. Because 100vw is tied to the viewport, such elements can span the entire screen regardless of their parent container.

Considerations: in many browsers, 100vw includes the width of a vertical scrollbar. If a page also has margins, padding, or borders, this can lead to horizontal overflow or an apparent extra width. Techniques to mitigate this include using overflow-x: hidden on the root element, using width: 100% on top-level containers where appropriate, or using dynamic viewport units (for example dvw) that respond to UI chrome changes on mobile.

Support and history: The vw unit is part of CSS Values and Units Level 3 and has been supported by major browsers for many years. 100vw is widely used in responsive design and fluid layouts.

Related concepts: other viewport units include 100vh for viewport height, and vmin and vmax, which relate to the smaller or larger viewport dimension. Dynamic viewport units such as dvw and dvh address changes in mobile UI chrome.