CSS - 100vw meaning

In this article, we would like to explain the 100vw value meaning in CSS.

Explanation

In CSS, 100vw stands for "100% of viewport width".

Where:

• 100 is a value that means 100%,
• vw is a unit that means viewport width.

Viewport is a rectangular area that contains the part of the web page that is currently visible in web browser window.

If the viewport width is 1000px:

• 100vw will be equal to 1000px,
• 50vw will be equal to 500px,
• 10vw will be equal to 100px,
• etc.

Note: read about viewport in this article.

Practical example

In the example below, we present how you can use 100vw in your CSS to make the .element to be as wide as the viewport.

.element {
    width: 100vw;
}

See also

1. CSS - 100vh meaning

2. CSS - viewport explanation

References

1. CSS values and units - Learn web development | MDN