javascript src 100% - 높이가 100 % 인 전체 화면 iframe





7 Answers

전체 화면 iframe 을 만드는 3 가지 방법 :

  • 방법 1 - 뷰포트 백분율 길이

    지원되는 브라우저 에서 height: 100vh 와 같은 뷰포트 비율 길이를 사용할 수 있습니다.

    여기서 100vh 는 뷰포트의 높이를 나타내며, 마찬가지로 100vw 는 너비를 나타냅니다.

    여기에 예제가있다.

    body {
        margin: 0;            /* Reset default margin */
    }
    iframe {
        display: block;       /* iframes are inline by default */
        background: #000;
        border: none;         /* Reset default border */
        height: 100vh;        /* Viewport-relative units */
        width: 100vw;
    }
    <iframe></iframe>

  • 접근법 2 - 고정 포지셔닝

    이 방법은 상당히 간단합니다. fixed 요소의 위치를 ​​설정하고 height / width100% 추가하면됩니다.

    여기에 예제가있다.

    iframe {
        position: fixed;
        background: #000;
        border: none;
        top: 0; right: 0;
        bottom: 0; left: 0;
        width: 100%;
        height: 100%;
    }
    <iframe></iframe>

  • 접근법 3

    이 마지막 메소드의 경우 body / html / iframe 요소의 height100% 됩니다.

    여기에 예제가있다.

    html, body {
        height: 100%;
        margin: 0;         /* Reset default margin on the body element */
    }
    iframe {
        display: block;       /* iframes are inline by default */
        background: #000;
        border: none;         /* Reset default border */
        width: 100%;
        height: 100%;
    }
    <iframe></iframe>

html width with

iframe 높이 = 100 %는 모든 브라우저에서 지원됩니까?

doctype을 다음과 같이 사용하고 있습니다 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

내 iframe 코드에서, 내가 말하는 경우 :

<iframe src="xyz.pdf" width="100%" height="100%" />

내 말은 실제로 남아있는 페이지의 높이를 취할 것입니다 (고정 된 높이가 50px 인 다른 프레임이 있기 때문에) 이것은 모든 주요 브라우저 (IE / Firefox / Safari)에서 지원됩니까?

또한 스크롤바에 관해서는, 비록 내가 scrolling="no" 라고하더라도, Firefox에서 비활성화 된 스크롤바를 볼 수 있습니다 ... 어떻게 스크롤바를 완전히 숨기고 iframe 높이를 자동으로 설정합니까?




같은 문제가 발생하여 div에 iframe을 가져 왔습니다. 이 시도:

<iframe src="http://.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>

높이는 뷰포트 높이를 나타내는 100vh로 설정됩니다. 또한 너비는 100vw로 설정할 수 있지만 소스 파일이 반응적일 경우 (프레임이 매우 넓어지는 경우) 문제가 발생할 가능성이 있습니다.




<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>




Akshit Soota의 대답에 덧붙여서 : importand는 각 부모 요소의 높이를 명시 적으로 설정합니다. 또한 테이블과 열의 높이를 명시 적으로 설정합니다.

<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">


    <table style="width: 100%; height: 100%" cellspacing="0"  cellpadding="0">
        <tr>
            <td valign="top" align="left" height="100%">
                <iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;" 
                        width="100%" height="100%" frameborder="0" scrolling="no"
                        src="http://www.youraddress.com" ></iframe> 
            </td>



다음은 간결한 코드입니다. jquery 메서드를 사용하여 현재 창 높이를 찾습니다. iFrame을로드 할 때 iframe의 높이를 현재 윈도우와 동일하게 설정합니다. 그런 다음 페이지의 크기 조정을 처리하기 위해 body 태그에는 문서 크기를 조정할 때마다 iframe의 높이를 설정하는 onresize 이벤트 핸들러가 있습니다.

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

다음은 작동하는 샘플입니다. http://jsbin.com/soqeq/1/




유체 전체 화면 iframe 을 구축하는 또 다른 방법은 다음과 같습니다.

페이지가로드되면 임베드 된 비디오가 전체 viewport 영역을 채 웁니다.

동영상 또는 포함 된 콘텐츠가있는 페이지를 방문하는 좋은 방법입니다. 삽입 된 비디오 아래에 추가 컨텐츠가있을 수 있으며, 이는 페이지를 아래로 스크롤 할 때 나타납니다.

예:

CSS 및 HTML 코드.

body {
    margin: 0;
    background-color: #E1E1E1;
}
header {
    width: 100%;
    height: 56vw;
    max-height: 100vh;
}
.embwrap {
    width: 100%;
    height: 100%;
    display: table;
}
.embwrap .embcell {
    width: auto;
    background-color: black;
    display: table-cell;
    vertical-align: top;
}
.embwrap .embcell .ifrwrap {
    height: 100%;
    width: 100%;
    display: inline-table;
    background-color: black;
}

.embwrap .embcell .ifrwrap iframe {
    height: 100%;
    width: 100%;
}
<header>
  <div class="embwrap">
    <div class="embcell">
      <div class="ifrwrap">
        <iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true" scrolling="no" frameborder="0" width="1920" height="1440" src="http://www.youtube.com/embed/5SIgYp3XTMk?autoplay=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=1&amp;controls=1&amp;showinfo=1&amp;fs=1"></iframe>
      </div>
    </div>
  </div>
</header>
<article>
  <div style="margin:30px; text-align: justify;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lorem orci, rhoncus ut tellus non, pharetra consequat risus. </p>
    <p>Mauris aliquet egestas odio, sit amet sagittis tellus scelerisque in. Fusce in mauris vel turpis ornare placerat non vel purus. Sed in lobortis </p>
  </div>
</article>




이 기능은 나에게 효과적 이었지만 ( "동일 도메인"의 경우) :

function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

다음 중 하나를 사용할 수 있습니다.

MakeIframeFullHeight(document.getElementById("iframe_id"));

또는

<iframe .... onload="MakeIframeFullHeight(this);" ....



Related