<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
background-color: beige;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
<div class="item item9">9</div>
<div class="item item10">10</div>
</div>
</body>
</html>container의 height을 100vh 로 주었다. view height 가 100이라는 뜻으로, 현재 보이는 페이지의 전체를 다 컨테이너의 영역으로 차지하게 하겠다는 말이다.
만약 height을 100%로 주면 어떻게 될까? 100vh 였을 때 페이지 전체를 차지하던 영역이 사라지고, div container의 부모의 높이의 100퍼센트를 채우게 된다.
container의 부모는 body이다. body를 100%로 지정해 보겠다.
body{
height: 100%;
}이래도 전체 페이지를 차지할 수가 없는데, 그 이유는 html의 높이가 100%가 아니기때문이다. html 까지 적용해주었을 때 비로소 전체 화면을 차지하게 된다.
부모에 상관없이, 보이는 view height을 100퍼센트 다 쓰겠다! 할 때 100vh을 쓴다.
