높이가 100 % 인 전체 화면 iframe

238

모든 브라우저에서 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 높이를 자동으로 설정하는 방법은 무엇입니까?

javascript  html  css  iframe  html-frames 
— testndtv
소스
14
.. 다른 versions..also 그냥 일종의 표준 있는지 확인하고 싶었 installed..Also 나는 모든 브라우저가없는 사실을 참조하십시오
— testndtv
1
CSS 검사기에서 시도해 볼 수도 있습니다.
— Ruben
6
그렇습니다. 오류 / 경고가 발생하지 않습니다 ...하지만 내 질문은 모든 브라우저가 실제로 100 % 높이를 적용합니까?
— testndtv
나 에게이 답변은 잘 작동했습니다 : stackoverflow.com/questions/5272519/…
— Zied Hamdi

답변:

276

이전 응답 상태로 프레임 세트를 사용할 수 있지만 iFrame 사용에 일관성이 없으면 다음 두 가지 예가 작동합니다.

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

대안:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

위와 같이 두 가지 대안으로 스크롤을 숨기려면

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

두 번째 예로 해킹하십시오.

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

iFrame의 스크롤 막대 overflow: hidden를 숨기려면 부모가 스크롤 막대를 숨기도록 만들고 iFrame은 최대 150 % 너비와 높이로 올라가서 스크롤 막대가 페이지 바깥쪽으로 가도록하고 본문에는 스크롤 막대가 없기 때문에 iframe이 페이지의 경계를 초과하지 않을 수도 있습니다. iFrame의 스크롤 막대를 전체 너비로 숨 깁니다!

— 도끼
소스
3
좋은 질문입니다. 한 가지 질문 만 있습니다. 왜 style = "height : 100 %; width : 100 %;" 어쨌든 iframe height = "100 %"width = "100 %"
— testndtv 11
1
또한 IE만이 100 % 높이를 취하지 않습니다 (약 200px ht 소요) ... FF와 Safri는 나머지 모든 높이를 취합니다.
— testndtv
@Boris Zbarsky 그래, 알려 줘서 고마워! 나는 지금 포스트를 업데이트했다!! @hmthr 이중 태그와 관련된 첫 번째 질문은 이전 브라우저는 "height"및 "width"태그를 사용하지만 style 태그와는 잘 작동하지 않기 때문입니다! IE 버그에 대해서는 해당 사례의 첫 번째 코드를 사용하는 것이 좋습니다.
— Ax
15
iframe에서 100 %를 올바르게 사용하려면 부모가 100 % 여야합니다. 최신 doctype에서는 html 및 body 태그가 자동으로 100 %가 아닙니다. html과 body에 height : 100 %를 추가하면 완벽하게 작동합니다. 따라서이 질문에 대한 정답은 내 xhtml doctype을 유지해야한다는 것을 제외하고는 rudie의 답변이라고 생각합니다. 또한 오버플로 규칙은 필요하지 않습니다. 그런 다음 스크롤바가 의도 한대로 자동으로 작동합니다.
— Spiralis
3
이 SO 답변 도 매우 짧고 훌륭합니다.
— Uwe Keim
164

전체 화면을 만드는 3 가지 접근 방식 iframe:

  • 접근법 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/를 추가하십시오.width 를100% .

    여기 예

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

  • 접근법 3

    이 마지막 방법의 경우, 단지 설정 height의 body/ html/ iframe에 요소 100%.

    여기 예

    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>
    스 니펫 확장

— 조쉬 크로 지어
소스
4
옵션 1의 변형을 사용하여 끝났습니다 ... 내가 당기는 소스가 꽤 넓고 iframe이 div에 포함되어 있기 때문에 width : 100 % 및 height : 100vh를 사용했습니다. 탁월한 솔루션. 감사합니다.
— NotJay
2
display: block이중 스크롤 막대를 방지하기 위해 트릭을 추가했습니다
— KavenG
45

1. DOCTYPE을 덜 엄격한 것으로 변경하십시오. XHTML을 사용하지 마십시오. 바보입니다. HTML 5 doctype을 사용하면 좋습니다.

<!doctype html>

2. iframe의 부모가 높이를 가지고 있는지 확인해야 할 수도 있습니다 (브라우저에 따라 다름). 그리고 부모님. 그리고 부모님. 기타:

html, body { height: 100%; }
— 루디
소스
9
여기에서 중요한 부분은 html 및 body 태그에 높이가 100 % 필요하다는 것입니다. 감사.
— Spiralis
1
본문 만 설정하면 Chrome에서는 작동하지만 다른 브라우저에서는 작동하지 않습니다.
— Dingle
— Josh Crozier
36

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

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

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

— NotJay
소스
3
seamless은 내가 아는 한 어떤 브라우저에서도 지원되지 않습니다
— VisualBean
1
이 문제를 해결하기 위해 필요한 시간보다 더 많은 시간을 보낸 후, 이것은 내가 필요한 것입니다. 웹 사이트를 제외하고는 다른 HTML 파일을 사용했는데, 뷰포트 높이를 약간 조정해야했지만 이제는 좋습니다. 감사합니다!
— 토마스 제이콥스
29

이것은 나를 위해 아주 잘 작동했습니다 (iframe 콘텐츠가 동일한 도메인 에서 온 경우에만 ).

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
— 이반
소스
21
이 iframe src페이지가 상위 페이지와 동일한 도메인에있는 경우에만 작동합니다. 그렇지 않으면에 권한 거부 오류가 발생합니다 contentWindow.document.
— wolfyuk
Wordpress 내 에서이 작업을 수행하기 위해 약간의 노력을 기울여 플러그인에 짧은 코드를 추가했습니다. 충돌처럼 작동합니다.
— Andy
효과가있다. 그러나 문제는 각 내부 iframe 포스트 백의 높이를 다시 계산하지 않는다는 것입니다. 해결 방법이 있습니까?
— Behrouz.M
7 

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>
스 니펫 확장

— 호아
소스
4

다음 테스트 작업

<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
— 우마 샨카 고엘
소스
1
이미 14 개의 다른 답변이 있습니다. 귀하의 답변이 14 명과 어떻게 다른지 또는 어떻게 다른지 설명 할 수 있습니까?
— Stephen Rauch
2

Akshit Soota의 답변에 추가 : 각 부모 요소의 높이와 테이블 및 열의 높이를 명시 적으로 설정하는 것이 중요 합니다.

<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>
— 브 라벨 다스
소스
2

먼저 CSS를 추가합니다

html,body{
height:100%;
}

이것은 HTML이 될 것입니다 :

 <div style="position:relative;height:100%;max-width:500px;margin:auto">
    <iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
    </iframe>
    </div>
— 타리크 자 브드
소스
1

간결한 코드는 다음과 같습니다. 현재 창 높이를 찾기 위해 jquery 메소드를 사용합니다. iFrame의로드시 iframe의 높이를 현재 윈도우와 동일하게 설정합니다. 그런 다음 페이지 크기 조정을 처리하기 위해 본문 태그에는 문서 크기를 조정할 때마다 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/

— BraveNewMath
소스
0

유동적 인 전체 화면을 만드는 또 다른 방법 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>
스 니펫 확장

— DAH
소스
Firefox 용 자바 스크립트가 필요할 수 있습니다. Firefox에서 iframe 높이에 일반적인 문제가 있습니다.
— DAH
0

http://embedresponsively.com/

이것은 훌륭한 리소스이며 몇 번이나 사용해 보았습니다. 다음 코드를 만듭니다 ....

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
— 톰 위 더링 턴
소스
0

이것 만이 나를 위해 일했습니다 (그러나 "동일 도메인").

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);" ....
— 토 두아
소스
0

당으로 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe , 백분율 값이 더 이상 허용되지 않습니다. 그러나 다음은 나를 위해 일했습니다.

<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

width:100%작동 하지만 작동 height:100%하지 않습니다. 그렇게 window.innerHeight사용되었습니다. 높이에 CSS 픽셀을 사용할 수도 있습니다.

작업 코드 : 링크 작업 사이트 : 링크

— 아넬 비살
소스
0 
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</iframe>
— blueDexter
소스
0

iframe이로드 될 때 iframe의 본문 hieght를 계산하는 함수를 호출 할 수 있습니다.

<script type="text/javascript">
    function iframeloaded(){
       var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
       curHeight = $frame.contents().find('body').height();
       if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
       }
    }
</script>

<iframe onload="iframeloaded()" src=...>
— 테팔 샤르마
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.