programing

I 프레임을 용기의 나머지 높이의 100%에 맞게 만듭니다.

instargram 2023. 8. 15. 09:45
반응형

I 프레임을 용기의 나머지 높이의 100%에 맞게 만듭니다.

저는 배너와 iframe으로 웹 페이지를 디자인하고 싶습니다.iframe이 나머지 페이지 높이를 모두 채우고 브라우저 크기가 조정되는 대로 자동으로 크기가 조정되기를 바랍니다.자바스크립트 코드를 작성하지 않고 CSS로만 끝낼 수 있습니까?

설정하려고 했습니다.height:100%, iframe, iframe을 하여 전체 페이지를 채우려고 .30px배너 div 요소의 높이 때문에 불필요한 수직 스크롤바를 얻었습니다.그건 완벽하지 않다.

웹 페이지의 전체 남은 높이를 성공적으로 점유하기 위해 DIV의 CSS 마진, 패딩 속성을 시도했지만, iframe에서 트릭이 작동하지 않았습니다.

 <body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;"></iframe>
</body>

2019년 업데이트

TL;DR: 오늘의 최고의 옵션은 - flexbox입니다.모든 것이 그것을 잘 뒷받침하고 있고 수년 동안 그래왔습니다.뒤를 돌아보지 말고 그렇게 하세요.다음은 플렉스박스의 코드 샘플입니다.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>

나머지 답변은 학습 및 역사적 이유로 남겨집니다.

비결은 100%를 취하는 것을 이해하는 것입니다.CSS 사양을 읽으면 거기에 도움이 될 수 있습니다.

긴 이야기를 요약하자면, 부모 요소가 필요하지 않은 "블록 포함"과 같은 것이 있습니다.간단히 말해서, 그것은 위치: 상대적 또는 위치: 절대적인 위치를 갖는 계층 구조의 첫 번째 요소입니다.아니면 몸의 요소 자체가 다른 것이 없다면 말입니다.따라서 "width: 100%"라고 말하면 "containing block"의 너비를 확인하고 요소의 너비를 동일한 크기로 설정합니다.다른 내용이 있는 경우 자신보다 큰 "포함 블록"의 내용을 얻을 수 있습니다(따라서 "넘치는" 경우).

높이는 동일한 방식으로 작동합니다.한 가지 예외를 제외하고는. 브라우저 창의 높이를 100%로 설정할 수 없습니다. 100%를 계산할 수 있는 최상위 요소는 본문(또는 html)입니까? 요소, 그리고 그것의 내용을 포함할 수 있을 만큼 충분히 확장됩니다. 높이 지정: 100%를 측정할 "상위 요소"가 없으므로 높이를 100%로 지정해도 아무런 효과가 없습니다. 창 자체는 카운트되지 않습니다. ;)

창에서 정확히 100% 확장되도록 하려면 다음 두 가지 선택 사항이 있습니다.

  1. JavaScript 사용
  2. DOCYPE을 사용하지 마십시오.이 방법은 좋은 방법은 아니지만 브라우저를 요소에서 높이="100%"를 수행할 수 있는 "skks 모드"로 설정하고 창 크기까지 확장합니다.DOCYPE 변경 사항을 수용하기 위해 페이지의 나머지 부분도 변경해야 합니다.

업데이트: 제가 이 글을 올렸을 때 이미 틀리지 않았는지는 모르겠지만, 지금은 확실히 구식입니다.오늘날 스타일시트에서 이 작업을 수행할 수 있습니다.html, body { height: 100% }실제로 뷰포트 전체로 확장됩니다. DOCYPE도.min-height: 100%상황에 따라 유용할 수도 있습니다.

그리고 저는 더 이상 누구에게도 괴짜 모드 문서를 만들라고 권하지 않을 것입니다. 왜냐하면 그것은 그것들을 해결하는 것보다 훨씬 더 많은 두통을 유발하기 때문입니다.모든 브라우저에는 각기 다른 퀘이크 모드가 있기 때문에 브라우저 간에 페이지를 일관되게 표시하는 것이 훨씬 더 어려워집니다.항상 DOCYPE을 사용합니다.가급적 HTML5가 좋습니다.<!DOCTYPE html>기억하기 쉽고 10년 된 브라우저도 모든 브라우저에서 매력적으로 작동합니다.

유일한 예외는 IE5 같은 것을 지원해야 하는 경우입니다.만약 당신이 거기에 있다면, 어쨌든 당신은 혼자입니다.그 오래된 브라우저들은 오늘날의 브라우저들과는 전혀 다르며, 여기에 주어진 작은 조언들이 여러분에게 도움이 될 것입니다.긍정적인 측면에서, 만약 당신이 거기에 있다면, 당신은 아마도 호환성 문제를 제거하는 한 종류의 브라우저를 지원해야 할 것입니다.

행운을 빕니다.

업데이트 2: 야, 오랜만이야!6년 후, 새로운 옵션이 등장했습니다.방금 아래 댓글에 대해 논의했습니다. 오늘날의 브라우저에서 작동하는 더 많은 트릭이 있습니다.

옵션 1 - 절대 위치 지정.첫 번째 부품의 정확한 높이를 알 때 사용하기에 좋고 깨끗합니다.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row">
  <p>Some text</p>
  <p>And some more text</p>
</div>
<div class="second-row">
  <iframe src="https://jsfiddle.net/about"></iframe>
</div>

노트 - 몇가참고사항더지▁- - 더▁-▁some.second-row한 이유는 컨이너필 때문입니다.bottom: 0그리고.right: 0어떤 이유에서인지 iframe에서 작동하지 않습니다.대체된 요소가 되는 것과 관련이 있습니다. 하지만width: 100%그리고.height: 100%잘 작동합니다.display: block그것은 그것이기 때문에 필요합니다.inline기본적으로 요소를 지정하고 공백을 지정하지 않으면 이상한 오버플로를 생성하기 시작합니다.

옵션 2 - 표.첫 번째 부분의 높이를 모를 때 작동합니다.실제 데이터를 모두 사용할 수 있습니다.<table>태그를 붙이거나 멋진 방법으로 합니다.display: table요즘 유행하는 것 같아서 후자로 하겠습니다.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
.first-row {display: table-row; overflow: auto; background-color: lime;}
.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }
.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <div class="second-row">
    <iframe src="https://jsfiddle.net/about"></iframe>
  </div>
</div>

노트 - 몇가참고사항더지▁- - 더▁-▁some.overflow: auto행에 항상 모든 내용이 포함되어 있는지 확인합니다.그렇지 않으면 부유하는 요소들이 때때로 넘칠 수 있습니다.height: 100%두 번째 행은 첫 번째 행을 최대한 작게 압축할 수 있는 만큼 확장되도록 합니다.

권장 사항:옵션 3 - 플렉스 박스 - 그 중에서 가장 깨끗한 것.

body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
  <div class="first-row">
    <p>Some text</p>
    <p>And some more text</p>
  </div>
  <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>

노트 - 몇가참고사항더지▁- - 더▁-▁some.overflow: hidden이 iframe을 입니다.display: block 화면 보기나 에서는 보이지 않지만 작은 미리 보기 창에는 스크롤 전체 화면 보기나 스니펫 편집기에서는 볼 수 없지만 작은 미리 보기 창에는 스크롤 막대가 추가로 표시됩니다.그게 뭔지 모르겠어요, 만약 프레임이 이상하다면요.

우리는 이 문제를 해결하기 위해 자바스크립트를 사용합니다. 여기 그 소스가 있습니다.

var buffer = 20; //scroll bar buffer
var iframe = document.getElementById('ifm');

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}

function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}

// .onload doesn't work with IE8 and older.
if (iframe.attachEvent) {
    iframe.attachEvent("onload", resizeIframe);
} else {
    iframe.onload=resizeIframe;
}

window.onresize = resizeIframe;

참고:ifm는 iframe ID입니다.

pageY()John Resig(jQuery의 저자)에 의해 작성되었습니다.

이를 위한 또 다른 방법은 다음을 사용하는 것입니다.position: fixed;상위 노드에 있습니다.
틀리지 , 내가틀않면다았지리,면,position: fixed;이하면 요소가 뷰포트에 연결됩니다. 따라서 이 노드를 지정하면width: 100%;그리고.height: 100%;전체 화면에 걸쳐 있는 속성입니다.이시터, 당은신을 넣으면 .<iframe>내부에 태그를 부착하고 남은 공간(가로와 높이 모두)에 간단한 방법으로 걸쳐줍니다.width: 100%; height: 100%;CSS 명.

예제 코드

    body {
        margin: 0px;
        padding: 0px;
    }

    /* iframe's parent node */
    div#root {
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* iframe itself */
    div#root > iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
    }
   <html>
        <head>
            <title>iframe Test</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        </head>
        <body>
            <div id="root">
                <iframe src="http://stackoverflow.com/">
                    Your browser does not support inline frames.
                </iframe>
            </div>
        </body>
    </html>

다음은 몇 가지 현대적인 접근 방식입니다.

  • 접근법 1 - 뷰포트 상대 단위 조합 /.

    그표은라는 calc(100vh - 30px)나머지 높이를 나타냅니다.에▁where디100vh는 브라우저의 높이이며 의 사용은 다른 요소의 높이를 효과적으로 대체합니다.

    여기의 예

    body {
    margin: 0;
}
.banner {
    background: #f00;
    height: 30px;
}
iframe {
    display: block;
    background: #000;
    border: none;
    height: calc(100vh - 30px);
    width: 100%;
}
    <div class="banner"></div>
<iframe></iframe>

    여기서는 지원하고 여기서는 뷰포트 상대 장치를 지원합니다.

  • 접근법 2 - Flexbox 접근법

    여기의 예

    을 합니다.display 요체의소에 대한 공통 flex flex-direction: column(요소를 서로 겹쳐 쌓을 수 있음). 다음 럼세트그를 합니다.flex-grow: 1에게.iframe요소를 사용하여 나머지 공간을 채웁니다.

    body {
    margin: 0;
}
.parent {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.parent .banner {
    background: #f00;
    width: 100%;
    height: 30px;
}
.parent iframe {
    background: #000;
    border: none;
    flex-grow: 1;
}
    <div class="parent">
    <div class="banner"></div>
    <iframe></iframe>
</div>

    이 접근 방식은 지원이1 적기 때문에 앞서 언급한 접근 방식을 따르는 것이 좋습니다.

1Chrome/FF에서 작동하는 것처럼 보이지만 IE에서는 작동하지 않습니다(첫 번째 방법은 현재 모든 브라우저에서 작동함).

있다니습으로 하면 됩니다.DOCTYPE하지만 당신은 사용해야 합니다.table다음을 확인하십시오.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}

.header {border-bottom:1px solid #000}
.content {height:100%}
</style>
</head>
<body>
<table>
    <tr><td class="header"><div><h1>Header</h1></div></td></tr>
    <tr><td class="content">
        <iframe src="http://google.com/" frameborder="0"></iframe></td></tr>
</table>
</body>
</html>

이미 답변이 끝났을 수도 있습니다(위의 몇 가지 답변은 "올바른" 방법입니다). 하지만 저는 제 솔루션도 추가해야겠다고 생각했습니다.

우리의 iFrame은 div 안에 로딩되어 있기 때문에, 저는 윈도우보다 다른 것이 필요했습니다.높이.그리고 우리의 프로젝트가 이미 jQuery에 크게 의존하고 있는 것을 보면, 이것이 가장 우아한 해결책이라고 생각합니다.

$("iframe").height($("#middle").height());

여기서 "#middle"은 당연히 div의 id입니다.사용자가 창 크기를 조정할 때마다 이 크기 변경 사항을 기억해야 합니다.

$(window).resize(function() {
    $("iframe").height($("#middle").height());
});

맞습니다, 당신은 컨테이너에 대해 높이가 100%인 iframe을 보여주고 있습니다: 본체.

사용해 보십시오.

<body>
  <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
  <div style="width:100%; height:90%; background-color:transparent;">
    <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;">
    </iframe> 
  </div>
</body>

물론, 두 번째 디브의 높이를 당신이 원하는 높이로 변경합니다.

MichaAdel 코드는 저에게 도움이 되지만, 제대로 작동하기 위해 약간의 수정을 했습니다.

function pageY(elem) {
    return elem.offsetParent ? (elem.offsetTop + pageY(elem.offsetParent)) : elem.offsetTop;
}
var buffer = 10; //scroll bar buffer
function resizeIframe() {
    var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
    height -= pageY(document.getElementById('ifm'))+ buffer ;
    height = (height < 0) ? 0 : height;
    document.getElementById('ifm').style.height = height + 'px';
}
window.onresize = resizeIframe;
window.onload = resizeIframe;

제가 한 일은 이렇습니다.저도 같은 문제를 겪었고 결국 몇 시간 동안 웹에서 리소스를 검색했습니다.

<style type="text/css">
   html, body, div, iframe { margin:0; padding:0; height:100%; }
   iframe { position:fixed; display:block; width:100%; border:none; }
</style>

저는 이것을 머리 부분에 추가했습니다.

제 iframe은 3열 1열 테이블의 중간 셀 안에 위치하고 있습니다.

다을사용다대안른는을 사용하는 다른 .vh

<iframe src='/' style="display:block; border:none; height:100vh; width:100%;"></iframe>

html/css를 사용하여 다음과 같은 작업을 수행할 수 있습니다.

<body>
    <div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
    <iframe src="http: //www.google.com.tw" style="position:fixed;top:30px;bottom:0px;width:100%;"></iframe>
</body>

다음을 시도해 보십시오.

<iframe name="" src="" width="100%" style="height: 100em"/>

그것은 나에게 효과가 있었다.

HTML5의 새로운 기능: calc 사용(높이)

<html style="width:100%; height:100%; margin: 0px; padding: 0px;">
<body style="width:100%; height:100%; margin: 0px; padding: 0px;">
<div style="width:100%; height:30px; background-color:#cccccc;">Banner</div>
<iframe src="http://www.google.com.tw" style="width:100%; height: calc(100% - 30px);"></iframe>
</body>
</html>

비슷한 문제를 해결하기 위해 디스플레이: 테이블을 사용했습니다.이것은 작은 세로 스크롤 막대를 남겨둔 채로 거의 작동합니다.iframe이 아닌 다른 것으로 해당 유연한 열을 채우려고 하면 잘 작동합니다(그렇지 않음).

다음 HTML을 사용합니다.

<body>
  <div class="outer">
    <div class="banner">Banner</div>
    <div class="iframe-container">
      <iframe src="http: //www.google.com.tw" style="width:100%; height:100%;border:0;"></iframe>
    </div>
  </div>
</body>

display:table을 사용하도록 외부 div를 변경하고 너비와 높이가 설정되어 있는지 확인합니다.

.outer {
  display: table;
  height: 100%;
  width: 100%;
}

배너를 테이블 행으로 만들고 원하는 대로 높이를 설정합니다.

.banner {
  display: table-row;
  height: 30px;
  background: #eee;
}

iframe(또는 필요한 콘텐츠) 주위에 div를 추가하고 높이가 100%로 설정된 테이블 행으로 만듭니다(높이를 채우기 위해 iframe을 내장하려면 높이를 설정하는 것이 중요합니다).

.iframe-container {
  display: table-row;
  height: 100%;
}

아래는 직장에서 그것을 보여주는 jsfiddle입니다(파이들에서 작동하지 않는 것처럼 보이기 때문에 iframe 없음).

https://jsfiddle.net/yufceynk/1/

당신은 개념적인 문제가 있는 것 같습니다."높이를 설정하려고 했습니다. iframe에서 100%, 결과는 꽤 가깝지만 iframe이 전체 페이지를 채우려고 했습니다."라고 말하는 것은, "100%"가 "전체"와 같지 않은 경우는 언제입니까?

당신은 iframe에 컨테이너의 전체 높이(본체)를 채우도록 요청했지만 불행히도 당신이 30px 크기를 요청한 위의 <div>에 블록 레벨 형제가 있습니다.따라서 상위 컨테이너의 총 크기를 100% + 30px > 100%로 지정해야 합니다!따라서 스크롤 막대.

제가 생각하기에 당신이 말하는 것은 프레임과 테이블 셀이 할 수 있는 것처럼 iframe이 남은 것을 소비하기를 원한다는 것입니다. 즉, 높이="*"IIRC 이것은 존재하지 않습니다.

제가 알기로는 절대 단위와 상대 단위를 효과적으로 혼합/계산/감산할 수 있는 방법이 없기 때문에 다음 두 가지 옵션으로 축소할 수 있습니다.

  1. div를 완전히 배치하면 용기에서 꺼내 iframe만으로 용기 높이를 소비할 수 있습니다.이렇게 하면 다른 모든 방식의 문제가 발생하지만, 불투명도나 정렬은 문제가 없을 수 있습니다.

  2. 또는 div에 대한 % 높이를 지정하고 iframe의 높이를 그만큼 줄여야 합니다.절대 높이가 정말로 그렇게 중요하다면 대신에 div의 하위 요소에 적용해야 합니다.

한동안 CSS 루트를 시도한 후, 저는 jQuery에 꽤 기본적인 것을 쓰게 되었고, 그것이 저에게 도움이 되었습니다.

function iframeHeight() {
    var newHeight = $j(window).height();
    var buffer = 180;     // space required for any other elements on the page 
    var newIframeHeight = newHeight - buffer;
    $j('iframe').css('height',newIframeHeight);    //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
}

// When DOM ready
$(function() {
    window.onresize = iframeHeight;
}

IE8, Chrome, Firefox 3.6에서 테스트됨

아래 언급된 코드로 작동합니다.

<iframe src="http: //www.google.com.tw"style="position: absolute; height: 100%; border: none"></iframe>

@MichAdel의 답변과 비슷하지만, 저는 JQuery를 사용하고 있고 더 우아합니다.

<script type="text/javascript">
    $(document).ready(function() {
        var $iframe = $('#iframe_id')[0];

        // Calculate the total offset top of given jquery element
        function totalOffsetTop($elem) {
            return $elem.offsetTop + ($elem.offsetParent ? totalOffsetTop($elem.offsetParent) : 0);
        }

        function resizeIframe() {
            var height = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
            height -= totalOffsetTop($iframe);
            $iframe.height = Math.max(0, height) + 'px';
        }

        $iframe.onload = resizeIframe();
        window.onresize = resizeIframe;
    });
</script>

iframe_id tagiframe의입니다.

이렇게 하는 것이 어떻습니까(바디 패딩/마진을 약간 조정한 경우).

<script>
  var oF = document.getElementById("iframe1");
  oF.style.height = document.body.clientHeight - oF.offsetTop - 0;
</script>

로드/크기 조정 이벤트에서 차체 크기를 측정하고 높이를 최대 높이(전체 높이 - 배너 높이)로 설정하여 이 작업을 수행할 수 있습니다.

현재 IE8 Beta2에서는 이벤트가 IE8 Beta2에서 중단되었기 때문에 크기를 조정할 수 없습니다.

아니면 구식 학교에 가서 프레임셋을 사용할 수도 있습니다.

<frameset rows="30,*">
  <frame src="banner.swf"/>
  <frame src="inner.html" />
</frameset>

JS가 더 나은 선택인 것 같다는 데 동의하지만, 다소 CSS만 작동하는 솔루션이 있습니다.단점은 iframe html 문서에 내용을 자주 추가해야 하는 경우 전체적으로 1%를 조정해야 한다는 것입니다.

솔루션:

HTML 문서의 높이를 지정하지 마십시오.

html, body, section, main-div {}

코드화만 수행합니다.

#main-div {height:100%;}
#iframe {height:300%;}

참고: 디브는 당신의 주요 섹션이어야 합니다.

이것은 상대적으로 효과가 있을 것입니다.iframe은 표시되는 창 높이의 300%를 정확하게 계산합니다.두 번째 문서(iframe에서)의 html 내용이 브라우저 높이의 3배보다 작으면 작동합니다.해당 문서에 콘텐츠를 자주 추가할 필요가 없는 경우 영구적인 솔루션이며 콘텐츠 높이에 따라 필요한 %만 찾을 수 있습니다.

두 번째 html 문서(포함된 문서)가 상위 html 문서에서 높이를 상속하지 못하도록 하기 때문에 작동합니다.우리가 둘 다 높이를 지정하지 않았기 때문에 그것은 그것을 방지합니다.하위 항목에 %를 지정하면 상위 항목을 찾습니다. 그렇지 않으면 내용 높이가 지정됩니다.그리고 다른 컨테이너들이 높이가 주어지지 않은 경우에만 제가 시도한 것입니다.

"심리스" 속성은 이 문제를 해결하기 위한 새로운 표준입니다.

http://www.w3schools.com/tags/att_iframe_seamless.asp

이 속성을 할당할 때 테두리와 스크롤 막대를 제거하고 iframe의 크기를 콘텐츠 크기로 조정합니다.Chrome과 최신 Safari에서만 지원되지만,

여기에 대한 자세한 내용: HTML5 iFrame 심리스 속성

간단한 jQuery 솔루션

iframed 페이지 내의 스크립트에서 사용

$(function(){

    if(window != top){
        var autoIframeHeight = function(){
            var url = location.href;
            $(top.jQuery.find('iframe[src="'+ url +'"]')).css('height', $('body').height()+4);
        }
        $(window).on('resize',autoIframeHeight);
        autoIframeHeight();
    }

}

모체 높이가 100%가 아니기 때문에 iframe 높이를 %로 설정할 수 없습니다. 모체 높이를 100%로 설정한 후 iframe 높이를 100%로 적용합니다.

For eg.
<html>
<head>
<style>
html,body{height:100%}
</style> 
</head>
<body>
<iframe src="http://www.quasarinfosystem.com" height="100%" width="100%" ></iframe>
</body>
</html>

로드될 iframe의 내용에 액세스할 수 있는 경우 크기가 조정될 때마다 부모에게 크기를 조정하도록 지시할 수 있습니다.

    $(window).resize(function() {
        $(parent.document)
            .find("iframe")
            .css("height", $("body").css("height"));        
    }).trigger("resize");

페이지에 iframe이 두 개 이상 있는 경우 ID 또는 다른 영리한 방법을 사용하여 .find("iframe")를 향상시켜 올바른 iframe을 선택해야 할 수 있습니다.

이 시나리오를 달성하기 위해서는 css position을 사용하는 것이 가장 좋은 방법이라고 생각합니다.부모 div에 상대적인 위치를 설정하고 iframe에 절대 위치를 설정합니다.

.container{
  width:100%;
  position:relative;
  height:500px;
}

iframe{
  position:absolute;
  width:100%;
  height:100%;
}
<div class="container">
  <iframe src="http://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
 </iframe>
</div>

다른 패딩과 마진 문제를 위해 요즘 css3 calc()는 매우 발전했고 모든 브라우저와 대부분 호환됩니다.

체크 calc()

언급URL : https://stackoverflow.com/questions/325273/make-iframe-to-fit-100-of-containers-remaining-height

반응형

'programing' 카테고리의 다른 글

엑셀에서 그룹별로 데이터를 계산하려면 어떻게 해야 합니까?  (0) 2023.08.15
iOS 7 - 테이블 보기에서 달력 보기를 제자리에 표시하는 방법?  (0) 2023.08.15
토네이도 웹 서버와 함께 장고를 어떻게 사용합니까?  (0) 2023.08.15
Less가 CSS calc() 속성을 컴파일하려는 것을 방지하는 방법은 무엇입니까?  (0) 2023.08.15
Angular에서 불순한 파이프는 무엇입니까?  (0) 2023.08.15

'programing'의 다른글

  • 현재글I 프레임을 용기의 나머지 높이의 100%에 맞게 만듭니다.

관련글

댓글

티스토리툴바