“전체 화면”<iframe> iframe을 만들 때 : <iframe src=”mypage.html” style=”border:

다음 코드를 사용하여 iframe을 만들 때 :

<iframe src="mypage.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>

iframe은 끝까지 가지 않습니다. 10px 흰색 “테두리”가 iframe을 둘러 쌉니다. 이 문제를 어떻게 해결할 수 있습니까?

다음은 문제의 이미지입니다.

사이트 스크린 샷

답변

는 body대부분의 브라우저에 기본 마진을 가지고있다. 시험:

body {
    margin: 0;
}

페이지에서 iframe.

답변

전체 뷰포트를 덮기 위해 다음을 사용할 수 있습니다.

<iframe src="mypage.html" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
    Your browser doesn't support iframes
</iframe>

그리고 프레임이있는 페이지의 여백을 0으로 설정하십시오 (예 🙂 body { margin: 0; }. -실제로이 솔루션에는 필요하지 않습니다.

추가로 이것을 성공적으로 사용하고 있습니다. display:none사용자가 적절한 컨트롤을 클릭하면 및 JS 하고 있습니다.

참고 : 전체 뷰포트 대신 부모의 뷰 영역을 채우려면로 변경 position:fixed하십시오 position:absolute.

답변

뷰포트 백분율 길이 를 사용 하여이를 달성 할 수도 있습니다 .

5.1.2. 뷰포트 백분율 길이 : ‘vw’, ‘vh’, ‘vmin’, ‘vmax’단위

뷰포트 백분율 길이는 초기 포함 블록의 크기를 기준으로합니다. 초기 포함 블록의 높이 또는 너비가 변경되면 그에 따라 크기가 조정됩니다.

여기서는 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>

스 니펫 확장

이것은 대부분의 최신 브라우저에서 지원되며 여기에서 지원을 찾을 수 있습니다 .

답변

사용하십시오 frameborder="0". 전체 예는 다음과 같습니다.

    <iframe src="mypage.htm" height="100%" width="100%" frameborder="0">Your browser doesnot support iframes<a href="myPageURL.htm"> click here to view the page directly. </a></iframe>

답변

다음 속성을 추가하십시오.

scrolling="no"

답변

실제 예를 보지 않고 말할 수는 없지만 두 몸을 모두 시도하십시오. margin: 0px

답변

시도해 볼 수 frameborder=0있습니다.