[CSS3] Height :100% 가 적용되지 않을때 해결하는 방법

웹표준으로 코딩을 하다보면 Height 단위인 %가 적용이 되지 않는 경우가 있습니다. 

px단위로는 height 값이 적용되는데 %는 적용이 되지 않는 경우의 대처법하는 방법에 대해서 알아보겠습니다.

아래 box 클래스에 height 100%를 먹여보았으나 정상적으로 작동하지 않는 것을 확인할 수 있습니다.

하지만, 필요할 경우를 대비해서 한번 알아보도록하죠.

HEIGHT:100%가 적용되게 하는 방법

생각보다 정말 간단하게 해결할 수 있는데요.

html과 body 태그에 height 100%를 넣어주는 방법입니다.

위 코드를 적용시켜주면 정상적으로 box 클래스에 height 100%가 적용됨을 확인하실 수 있습니다.

원인 : %는 상대적인 값인데 div의 height값에 %를 적용하면 기준으로 삼을 상위 태그의 height값이 없기 때문에 적용이 되지 않습니다.

해결 : 최상위 태그인 에 기준으로 삼을 height 값을 설정함으로써 해결할 수 있습니다.