"Full screen" <iframe>
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
and make sure the parent has a position other than static
.