IT

높이가 100%인 풀스크린 iframe

itgroup 2022. 10. 19. 22:09
반응형

높이가 100%인 풀스크린 iframe

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

doctpe를 사용하는 목적은 다음과 같습니다.

<!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)에서 지원됩니까?

스크롤바에 만, 크크에 also also also also also also also also also also also also also also also also also also also also 。scrolling="no"파이어폭스에서 비활성화된 스크롤 바를 볼 수 있습니다.스크롤 바를 완전히 숨기고 iframe 높이를 자동으로 설정하려면 어떻게 해야 합니까?

이전 답변 상태로 프레임셋을 사용할 수 있지만 iFrames를 계속 사용할 경우 다음 2가지 예를 사용할 수 있습니다.

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

iframe:

  • 접근법 1 - Viewport-percentage 길이

    지원되는 브라우저에서는 다음과 같은 viewport-percentage 길이를 사용할 수 있습니다.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

    에서는 ""를 합니다.heightbody/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>

나도 같은 문제에 부딪혔어, iframe을 div에 꽂고 있었어.이것을 시험해 보세요.

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

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

1. DOSCTYPE를 덜 엄격한 것으로 변경합니다.XHTML을 사용하지 마세요.그건 말도 안 돼요.HTML 5 doctpe만 사용해도 됩니다.

<!doctype html>

2. iframe의 부모 높이가 (브라우저에 따라) 설정되어 있는지 확인해야 할 수 있습니다.그리고 그것의 부모.그리고 그것의 부모.기타:

html, body { height: 100%; }

이것은 나에게 있어서 매우 효과가 있었습니다(같은 도메인에서 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>

<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

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

다음 테스트 완료 작업

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

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>

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>

iframe 내부에 스크롤바가 없는 풀스크린 iframe을 표시하려면 다음 css를 사용합니다.더 이상 필요 없습니다.

iframe{
            height: 100vh;
            width: 100vw
        }
    
    iframe::-webkit-scrollbar {
        display: none;
    }

여기 간결한 코드가 있습니다.현재 창 높이를 찾기 위해 jquery 메서드를 사용합니다.iFrame 로드 시 iFrame의 높이가 현재 창과 동일하게 설정됩니다.페이지 크기를 조정하기 위해 본문 태그에는 문서의 크기가 조정될 때마다 iframe의 높이를 설정하는 크기 조정 이벤트 핸들러가 있습니다.

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

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

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

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

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

부모님이<div>여기에 언급된 다중 솔루션으로 높이를 채웁니다.

그러면 이런 것도 쓸 수 있어요

<div style="display:flex;">
    <iframe style="flex:1 1 0%;" src="..."></iframe>
</div>

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

반응형

'IT' 카테고리의 다른 글

Python 문자열에서 \xa0을 삭제하는 방법  (0) 2022.10.19
두 열의 조합을 위한 양방향 고유 키 제약 조건  (0) 2022.10.19
선택한 라디오 버튼의 값을 가져오려면 어떻게 해야 합니까?  (0) 2022.10.18
IntelliJ Import 정리  (0) 2022.10.18
Hibernate Validator 4.1+에서는 @NotNull, @NotEmpty 및 @NotBlank의 차이점은 무엇입니까?  (0) 2022.10.18

'IT'의 다른글

  • 현재글높이가 100%인 풀스크린 iframe

관련글

댓글

티스토리툴바