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
2
3
</pre>
<iframe src="http://example.org/" width="320" height="240"></iframe>
<pre>

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
2
3
</pre>
<iframe id="glu" src="http://example.com" width="100%" height="400"></iframe>
<pre>

- 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.

Post to Twitter Post to Yahoo Buzz Post to Delicious Post to Digg Post to Facebook Post to Google Buzz Send Gmail Post to LinkedIn Post to MySpace Post to Reddit Post to StumbleUpon Post to Technorati

Tags: , , ,

3 Responses to “Source Code -> Iframe with 100% Height”

  1. click here 22. Jul, 2012 at 5:57 pm #

    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 30. Jul, 2012 at 3:28 pm #

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

  3. awesome site 02. Aug, 2012 at 8:52 am #

    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