다음 코드를 사용하여 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있습니다.