iframe 높이 100% 맞추기

요즘 매일 NBA 포스팅만 하다보니 스스로 좀 민망하기도 해서 iframe 관련 간단한 포스팅을 하려 한다.

iframe은 다음과 같이 쓴다.

<iframe src="http://dgkim5360.tistory.com" width="100%" height="200px"></iframe>

height="200px" 대신 height="100%" 이 필요할 경우가 있다. 하지만 이는 제대로 적용되지 않는다. 이를 해결하기 위해서는 css style을 다음과 같이 주면 된다.

<iframe src="http://dgkim5360.tistory.com" style="display:block; width:100vw; height: 100vh"></iframe>

vw는 view-port width, 마찬가지로 vh는 view-port height를 의미하는 단위로, 사용자가 보는 스크린을 100 기준으로 재는 단위이다.

아래는 iframe에 다른 스타일도 적용한 예이다.

.iframe100 {
  display: block;
  border: none;
  height: 100vh;
  width: 100vw;
}

<iframe src="http://dgkim5360.tistory.com" class="iframe100"></iframe>

---

참조 링크

http://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100
vw, vh 외의 다른 방법도 필요할 경우에 참조하자