iframe height 자동조절 > 그외

• 목록

일단 아래 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="" title="" frameborder="0" scrolling="no" style="overflow-x:hidden; overflow:auto; width:100%; min-height:500px;"></iframe>

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