CSS - what is difference between 100vw and 100%?

1 answers

2 points

Asked by:

516

I was analysing some source code and, I have noticed there was used 100vw with width CSS property.

My question is:

Is 100vw the same like 100%?

If not, what is difference between 100vw and 100%?

1 answer

4 points

Answered by:

516

100vw means 100% width of viewport width.

e.g.

<body>
  <div>
    <div class="element" style="width: 100vh"></div>
  </div>
</body>

100% means 100% size of parent element size

It means:

e.g.

<body>
  <div class="parent">
    <div class="element" style="width: 100%"></div>
  </div>
</body>

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

See also