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

웹표준으로 코딩을 하다보면 Height 단위인 %가 적용이 되지 않는 경우가 있습니다.
px단위로는 Height 값이 적용되는데 %는 적용이 되지 않는 경우의 대처법 입니다.

위의 그림을 보면 빨간색 줄처럼 height:100%가 적용되지 않는것을 볼 수가 있습니다.
하지만 Height:100%가 꼭 적용되야 할 때가 있죠..

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

일단은 먼저 DOCTYPE부터 설정을 해야하구요.
그다음에 <style> </style>사이에 html, body {height:100%}를 넣으시면 적용이 됩니다.

<style type="text/css">
    html, body { height:100%; overflow:hidden }
    .h-div {height:96%; border:3px #f99 solid}
</style>

<p><br /></p>
<h6>HTML 부분</h6>  
      <div class="h-div"></div>

그러면.. 짜짠~~~
아래의 그림처럼 Height에 % 값이 적용이 됩니다.

원리는 아래와 같습니다.

원인 : %는 상대적인 값인데 DIV의 Height값에 %를 적용하면 기준으로 삼을 상위 태그의 Height값이 없기 때문에 적용이 되지 않음
해결 : 최상위 태그인 에 기준으로 삼을 height 값을 설정함으로써 해결할 수 있음

​