[javascript] 높이가 100 % 인 전체 화면 iframe

JAVASCRIPT / 글쓴이

모든 브라우저에서 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>