CSS 100%가 적용이 안될 때

CSS를 사용하다 보면 요소값에 % 적용을 하는경우가 상당수 많은데

100%를 이용해서 꽉차게하거나

혹은 div 등의 요소안에 다른 요소가없는데 사이즈를 가로는 되는데 세로사이즈가 안되는경우가 태반이다.

대처방안으로 display:table, display:table-row를 사용한다는데

이건 너무 부적절하다고 생각하고

우회방안으로

height:9999px;

overflow-y:hidden;

이런 방식도 존재하지만 이방법또한 옳지않다.

대처방안으로 존재하는것은

바로 Viewport를 이용하는 것이다.

vh와 vw가 있다.

1000px라는 값이 존재한다고 가정할때

1vh는 10px를 나타낸다.

100분의1이다.

상대적으로 뷰의 너비와 높이를 맞출수있다.

100%를 적용한다고 가정한다면

100vh를 이용하면 된다.

<div class="contain">test</div> .contain{width:100vh; height:100vh}