Programing

높이가 100 % 인 전체 화면 iframe

lottogame 2020. 4. 21. 08:17
반응형

높이가 100 % 인 전체 화면 iframe

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

이전 응답 상태로 프레임 세트를 사용할 수 있지만 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 가지 접근 방식 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>

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

<!doctype html>

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

html, body { height: 100%; }

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

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

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

이것은 나를 위해 아주 잘 작동했습니다 (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>


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>

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

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>

먼저 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>

다음 테스트 작업

<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>

당으로 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 픽셀을 사용할 수도 있습니다.

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

간결한 코드는 다음과 같습니다. 현재 창 높이를 찾기 위해 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/

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

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>

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

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);" ....

참고 URL : https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100

반응형

'Programing' 카테고리의 다른 글

힘내 : 지점에서 모든 커밋을 스쿼시하는 방법  (0) 2020.04.21
로그인시 ssh-agent 시작  (0) 2020.04.21
Android Studio에서 사용하지 않는 가져 오기 제거  (0) 2020.04.21
자바 객체 대 객체 매핑을위한 도구?  (0) 2020.04.21
API를 구현할 때 블록에서 자체 캡처를 피하려면 어떻게해야합니까?  (0) 2020.04.21

'Programing'의 다른글

  • 현재글높이가 100 % 인 전체 화면 iframe

관련글

댓글

티스토리툴바