"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:

Screenshot of site


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., body { margin: 0; }. - Actually, this is not necessary with this solution.

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.