[CSS] 높이 100%

CSS에서 가로를 100% 속성을 넣어줄떄는 해당 id 또는 클래스에

width: 100%;

위 속성을 입력해주면 된다. 

하지만 가로 속성

height : 100%;

이건 지원되지 않는다. 

이 속성을 사용하기 위해서는 정확한 픽셀(px) 단위를 입력해주거나 스크립트 또는 계산 속성을 이용하여 입력해주어야 한다. 

그래서 text 또는 이미지가 없는 div에 100%속성을 넣어주기 위해서는 아래와 같이 사용한다. 

padding-bottom : 100%;

이렇게 사용하면 세로크기는 유동적으로 지정이 되는것은 확인이 되지만 뭔가 이상할 것이다. 

그렇다. width의 크기를 기준으로 100%가 설정되었다. 

그럼 내가 원하는 100% 크기를 설정하려면 어떻게 입력해야 할까?

방법은 여러가지 있지만 스크립트 없이 많이 쓰는 방법은 아래와 같은 방법이다. 

height : 100vh;

 또는

min-height : 100%;

 

하지만 이렇게 사용해야할 상황을 애초에 만들지 말고 웹 설계를 잘해서

display: flex;

속성을 활용 하도록 하자. 그럼 height : 100%; 이렇게 해도 적용된다.