height: 100% vs 100vh

Study/css

더 멋진 세상을 꿈꾸는 개발자 2020. 4. 3. 21:59

.container{
  background: beige;
  height: 100%;
}

height: 100%; 라는 의미는

선택자 즉, .container가 들어있는 부모의 100%를 채우겠다는 말.

html파일이 이렇게 되어있다면,

<body>
  <div class="container"></div>
</body>

container의 부모는 body 인것이다.

body {
  height: 100%;
}

.container{
  background: beige;
  height: 100%;
}

그럼 body에 높이 100% 값을 추가해보자.

그러나, 그래도 아무런 변화가 없음.

그래서

body, html {
  height: 100%;
}

.container{
  background: beige;
  height: 100%;
}

body뿐 아니라 html의 값도 같이 설정해줘야한다.

그러나 만약 내가 이렇게 부모의 값에 의존하지 않고,

부모의 값에 상관없이 값을 설정하고 싶다 하면, 그때 vh 단위 vh=view height 를 쓰는 것이다.

height: 100vh; 의 의미는 100%의 뷰 하이를 다 쓰고 싶다는 의미.