"Full screen" <iframe>
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:
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
.
The body
has a default margin in most browsers. Try:
body {
margin: 0;
}
in the page with the iframe
.