[CSS] iframe height:100%가 안될 때 viewport를 이용하여 해결하기

iframe 관련해서 찾아보다가 재미있는거 발견해서 글 작성합니다.

iframe 태그를 쓰다보면 간혹 높이가 100%가 안되는 상황이 발생합니다. (자주있죠)
또한 다른 요소들의 크기를 조정하다가 %의 크기로 화면을 넘어가기도 합니다.

이런 경우 여러가지 방법으로 해결이 가능하지만 viewport를 이용해서도 가능합니다.

viewport란?

viewport란 브라우저에서 웹페이지(요소)가 표현되는 영역을 의미합니다. PC웹에선 크게 의미없을 수 있지만, 모바일 웹에선 이야기가 다릅니다.

모바일 디바이시는 우선 크기가 작기 때문에 화면 전체를 그리기가 어렵습니다. 그러나 화면 전체를 그리는 풀브라우징이 모바일 브라우저에서 지원하고 있고, 모바일 환경에서도 PC웹과 같이 화면 전체를 뿌려주길 원합니다.

그치만 단순위 전체 크기만 늘려서 화면을 그리면.. 기존 요소들(글꼴, 이미지 등)이 너무 작아지게 되죠.

이걸 viewport를 통해 해결합니다. 아래 viewport 관련 속성인 vh, vw를 보죠.


vh와 vw는 viewport height, viewport width의 약자입니다. 이 요소는 총 높이, 너비값의 1/100을 의미합니다.
예를들면..

width:900px 인 웹 페이지가 있을 떄 여기의 1 vw는 9px가 됩니다. vh도 동일하죠.

이렇게 되면 현재 화면에 그려지는 총 크기에 1/100의 크기의 값을 항상 가질 수 있습니다.
이를 통해서 전체적인 글꼴의 크기나 이미지 크기를 조정할 수 있지요.

비슷한 속성으론 vmin, vmax도 있습니다. (딱봐도 감오죠?)

iframe의 높이를 맞춰보자

viewport에 대해 알았으니 별거 없습니다.  vh를 100으로 주게되면 현재 그려진 영역의 크기에서 100%에 해당되는 크기만큼을 잡기 때문에 화면을 넘어가거나, 적어질일이 없습니다.

<iframe src=123123 width="100%" height="100vh"></iframe>

Reference

http://dgkim5360.tistory.com/entry/adjusting-iframe-height-100-precent
https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100

---

HAHWUL Security engineer, Gopher and H4cker!