"Full screen" <iframe>

html iframe
Trufa picture Trufa · Oct 20, 2010 · Viewed 467.7k times · Source

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

Answer

Lawrence Dol picture Lawrence Dol · Feb 6, 2013

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.

Related questions

How to apply CSS to iframe?

I have a simple page that has some iframe sections (to display RSS links). How can I apply the same CSS format from the main page to the page displayed in the iframe?

Read More
Make iframe automatically adjust height according to the contents without using scrollbar?

For example: <iframe name="Stack" src="http://stackoverflow.com/" width="740" frameborder="0" scrolling="no" id="iframe"> ... </iframe> I want it to be able to adjust its height according to the contents inside it, without using scroll.

Read More
Remove border from IFrame

How would I remove the border from an iframe embedded in my web app? An example of the iframe is: <iframe src="myURL" width="300" height="300">Browser not compatible.</iframe> I would like the transition from the …

Read More