Source Code -> Iframe with 100% Height

Resizing an IFrame to fill in 100% height
Ever wonder how to create an iframe that fills the entire height (and width) of a page?

You probably tried writing something like:

1
<iframe width="100%" height="100%"></iframe>

and expected the iframe to fill up whatever it could.
The width=100% does what you expected and fills up the entire width of the page, but the height just stays about 200px.

The problem is that the IFrame is not a block element so its hight is fixed to about 200px unless you set the hight to exact size, e.g.: 550px but in most cases this won’t solve the problem I’ve described earlier.

There are many solutions of the problem some works well some don’t. For example there is a pure CSS solution that will fix it.

The solutions

 – CSS approach

You have to use the following style:

1
2
3
4
5
6
7
8
9
10
11
html, body, iframe {
   margin:0; /* remove any margins of the IFrame and the body tag */
   padding:0;
   height:100%; /* set height 100% so that it fills the entire view port*/
}
iframe {
   display:block; /* force the iframe to display as block */  
   height:100%; /* assign 100% height */
   width: 100%;
   border:none;
}

And here is the actual HTML:

1
<iframe src="http://example.org/" width="320" height="240"></iframe>

Demo: http://jsfiddle.net/dL8zj/

So this is great solution but it works only on full height page without any other elements. Let’s think of a page where we have header, main menu and footer and we want to stretch the IFrame within the content body of page and in this case we will need some JavaScript which will be run once the main page is loaded or resized:

 – JavaScript solution

Put this in the head of your page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function resize_iframe()
{
    var height=window.innerWidth;//Firefox
    if (document.body.clientHeight)
    {
        height=document.body.clientHeight;//IE
    }
    //resize the iframe according to the size of the
    //window (all these should be on the same line)
    document.getElementById("glu").style.height=
        parseInt(height - document.getElementById("glu").offsetTop-8)+"px";
}

// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe;

And inside your page’s body create the iframe tag:

1
<iframe id="glu" src="http://example.com" width="100%" height="400"></iframe>

- JavaScript – second solution

Similar to the previous one there is another JavaScript function that can solve the problem:

1
2
3
4
5
6
7
8
function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= document.getElementById('frame').offsetTop;
    height -= 20; /* whatever you set your body bottom margin/padding to be */
    document.getElementById('frame').style.height = height +"px";
};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;

Conclusion

You’re more than welcome to share your thoughts on the previous solutions. If you stumbled on another one that hasn’t been mentioned here I’d like to see it and implement it in real world scenario so feel free to post a comment.

About

Just a guy with strong interest in PHP and Web technologies

Posted in CSS, JavaScript, Small Tips Tagged with: , , ,
3 comments on “Source Code -> Iframe with 100% Height
  1. click here says:

    Interesting blog! Is your theme custom made or did you
    download it from somewhere? A design like yours with a few simple tweeks would really make my blog stand out.

    Please let me know where you got your design. Cheers

  2. Visit Here says:

    As the admin of this site is working, no uncertainty
    very rapidly it will be famous, due to its feature
    contents.

  3. awesome site says:

    I rarely comment, but i did a few searching and wound up here
    Source Code -> Iframe with 100% Height | Yin Yang Source. And I do have 2 questions for you if it’s allright. Is it only me or does it seem like some of the comments look as if they are written by brain dead people? :-P And, if you are writing at other social sites, I would like to keep up with anything new you have to post. Could you make a list of all of your social pages like your Facebook page, twitter feed, or linkedin profile?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Categories

Quotes

Don’t worry about the world coming to an end today. It’s already tomorrow in Australia. — Charles M. Schulz