아이프레임 iframe height 높이 자동조절 방법

아이프레임 iframe height 높이 자동조절하는 방법

사이트를 만들다 보면 아이프레임을 자주 사용하게 되는데..
html과 body에 100%를 주어서 아이프레임을 둘러싸고 있는 height를 100%를 설정해줘도 되지만.

html,body {height:100%;}

이게 여의치 않을때!! 
아이프레임의 높이를 100%로 설정해도 안되는 경우!!
이렇게 하면 해결가능!!

콘텐츠에 따라 아이프레임 높이 자동조절

일단 아래 script를 추가해준다.

<script type="text/javascript"> //<![CDATA[ function calcHeight(){ //find the height of the internal page var the_height= document.getElementById('the_iframe').contentWindow. document.body.scrollHeight; //change the height of the iframe document.getElementById('the_iframe').height= the_height; //document.getElementById('the_iframe').scrolling = "no"; document.getElementById('the_iframe').style.overflow = "hidden"; } // </script>

그리고 위 스크립트를 실행할 수 있도록 아이프레임에 onload와 id로 불러온다.
최소 높이(min-height)도 설정

<iframe src="아이프레임.html" id="the_iframe" onload="calcHeight();" name="WrittenPublic" title="게시판뷰" frameborder="0" scrolling="no" style="overflow-x:hidden; overflow:auto; width:100%; min-height:500px;"></iframe>

이렇게하면 사용하는 브라우저에 맞도록, 나의 컨텐츠에 맞도록
iframe의 height가 자동으로 100%로 설정된다.