height: 100% 와 height: 100vh 의 차이

틀린 내용이 있을 수 있습니다.
발견하시면 말씀 부탁드립니다! 🙇

---

 

한 줄로 요약하면 %는 상위 엘리먼트에 대한 비율이고, vh는 뷰포트(viewport, 화면 크기)에 대한 비율이다.

예를들어 부모 엘리먼트의 높이가 1500px이고 자식 엘리먼트의 높이가 100%로 설정되어 있다면, 자식 엘리먼트의 높이는 부모 엘리먼트를 따라 1500px가 될 것이며, 화면 높이를 벗어난다. 반연 자식 엘리먼트의 높이가 100vh로 설정되어있다면 부모 엘리먼트 높이와 상관없이 기기의 화면 높이에 딱 맞게 보여질 것이다.

 

 

---

참고

• https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and