“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


solution

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.

Example Here

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.