HTML, CSS, JavaScript
[CSS] 100vh와 100%의 차이 (100vh vs 100%)
15호의 개발자
2021. 8. 8. 15:40
반응형
height: 100vh VS height: 100%
CSS를 보다보면 height을 100vh으로 설정하기도 하고 100%로 설정하기도 한다.
|
1
2
3
|
height: 100vh;
height: 100%
|
cs |
이 둘의 차이는 무엇일까?
height: 100vh
viewport 높이의 100%
height: 100%
parent element 높이의 100%
height: 100%로 정하면 parent 값에 의존하므로, parent 값에도 height이 설정되어 있어야 한다.
반면, height: 100vh로 정하면 parent 값에 의존하지 않으므로, 어디에서든 사용할 수 있다.
반응형