Languages
[Edit]
EN

CSS - 100vh meaning

3 points
Created by:
Dragontry
731

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.

100vh explanation on web browser example.
100vh explanation on web browser example.

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

Alternative titles

  1. CSS - 100vh explanation
  2. CSS - 100 vh meaning / explanation
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join