“전체 화면”
When I use the following code to create an iframe:
<iframe src="mypage.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>
The iframe doesn't go all the way—a 10px white "border" surrounds the iframe. How could I solve this?
Here is an image of the problem:
The body
has a default margin in most browsers. Try:
body {
margin: 0;
}
in the page with the iframe
.
To cover the entire viewport, you can use:
<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>
And be sure to set the framed page's margins to 0, e.g.,
- Actually, this is not necessary with this solution.body { margin: 0; }
.
I am using this successfully, with an additional display:none
and JS to show it when the user clicks the appropriate control.
Note: To fill the parent's view area instead of the entire viewport, change position:fixed
to position:absolute
.
You can also use viewport-percentage lengths to achieve this:
5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
Where 100vh
represents the height of the viewport, and likewise 100vw
represents the width.
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>
This is supported in most modern browsers - support can be found here.
Use frameborder="0"
. Here's a full example:
<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>
Try adding the following attribute:
scrolling="no"
Impossible to say without seeing a live example, but try giving both bodies margin: 0px
You could try frameborder=0
.
Use this code instead of it:
<frameset rows="100%,*">
<frame src="-------------------------URL-------------------------------">
<noframes>
<body>
Your browser does not support frames. To wiew this page please use supporting browsers.
</body>
</noframes>
</frameset>
참고URL : https://stackoverflow.com/questions/3982422/full-screen-iframe
'IT' 카테고리의 다른 글
MAX (날짜)를 사용하여 GROUP BY (0) | 2020.06.22 |
---|---|
특정 위치에서 문자열에 문자를 삽입하는 방법은 무엇입니까? (0) | 2020.06.22 |
Room Persistence lib의 기본 키를 자동 증분으로 만드는 방법 (0) | 2020.06.22 |
Flask / Jinja2를 사용하여 HTML을 템플릿으로 전달 (0) | 2020.06.22 |
OnFragmentInteractionListener를 구현하는 방법 (0) | 2020.06.22 |