“Full screen” <iframe>

Question

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:

Answer 1

The body has a default margin in most browsers. Try:

body {
    margin: 0;
}

in the page with the iframe.

Answer 2

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>

Answer 3

Try adding the following attribute:

scrolling="no"

Answer 4

You could try frameborder=0.

Answer 5

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.

Answer 6

Impossible to say without seeing a live example, but try giving both bodies margin: 0px