<div class="div1">
  hello
</div>
<div class="div2">
  hello vw
</div>
<div class="div3">
  hello vh
</div>
.div1 {
  width:100px;
  height:100px;
  background:lavender;
}

.div2{
  width: 50vw; /*화면의 넓이값의 50%*/
  height: 100px;
  background: aqua;
}

.div3{
  width: 50vh; /*화면의 높이값의 50%*/
  height: 100px;
  background: violet;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.