CSS - 100vh meaning

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

Explanation

In CSS, 100vh stands for "100% of viewport height".

Where:

• 100 is a value that means 100%,
• vh is a unit that means viewport height.

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

If the viewport height is 1000px:

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

Note: read about viewport in this article.

Practical example

The 100vh can be useful for setting the height of elements, such as full-screen background to be the full height of the viewport.

In the example below, we present how you can use 100vh in your CSS to make the .element to be the full height of the viewport and the full width of the parent element.

.element {
    height: 100vh;
    width: 100%;
}

See also

1. CSS - 100vw meaning

2. CSS - viewport explanation

References

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