라이믹스질답게시판

모바일과 PC에 동시 적용 가능한 아이프레임 반응형 코드 고수님들에 도움 부탁드립니다.

Lv3
december

유튜브 동영상은 아니구요.

 

일반 페이지를 불러오려고 하는데

 

모바일과 PC에 동시 적용 가능한 아이프레임 반응형 코드 고수님들에 도움 부탁드립니다.

아래 코드로는 잘 적용이 안돼네요...

 

<div class="section">
<style>
      .google {
        position: relative;
        width: 100%;
        padding-bottom: 100%;
      }
      .google iframe {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>
<div class="google"></div>

 

 

위로 아래로
댓글 3
  • 저두 예전에 아이프레임을 가로&세로 핏되도록 넣을 일이 있었는데요
    그 당시 가로길이는 100%로 가변지정이 가능하였지만 세로길이는 100% 가변지정이
    안되었던거로 기억 합니다. (지금은 모르겠네요.. HTML5 나 CSS3 등의 기술이 나왔으니)

    저의 경우에는 자바스크립트 활용하여서 해결 하였습니다.
    브라우저의 INNER HEIGHT 값을 자바스크립트를 통하여 구한뒤
    IFRAME 의 HEIGHT 값을 대응시키는 방식으로 구현하였습니다.
    (여러 방법을 시도하였지만 위의 방법이 브라우저 안가리고 가장 정확하게 작동했습니다.)

    브라우저의 INNER HEIGHT 값을 구하고, 아이프레임에 대입하는
    ON LOAD 할때 한번 작동하고, WINDOW RESIZE 시 마다 반복 작동되게 하면
    창의 크기조절시에도 자동으로 아이프레임 세로길이가 조정됩니다.
  • 추가로 메인사이트에는 스크롤바 없이, 아이프레임 내에 스크롤바가 작동하도록 하려면 위와 같은 방법으로 하시면 되고, 반대로 아이프레임 내에 스크롤바 없이 메인 사이트에 스크롤바가 있도록 하려면 아이프레임의 height값을 아이프레임 document의 inner height로 대응 하시면 됩니다.
  • Lv3
    프렌다님 답변 감사합니다.
    즐거운 주말보내세요..

    <script type="text/javascript">
    function resize_frame(id) {
    var frm = document.getElementById("iframe-content");
    function resize() {
    frm.style.height = "auto"; // set default height for Opera
    contentHeight = frm.contentWindow.document.documentElement.scrollHeight;
    frm.style.height = contentHeight + 300 + "px"; // 23px for IE7
    }
    if (frm.addEventListener) {
    frm.addEventListener('load', resize, false);
    } else {
    frm.attachEvent('onload', resize);
    }
    }
    resize_frame('iframe-content');
    </script>