Post details: 100% height iframe

Jun 06, 2007 : 100% height iframe

So <iframe height="100%"> doesn't make an iframe fill all the remaining portion of a window like you might expect. I found several places where people showed how they got it to resize with javascript, but those didn't work for me. The DOM properties that they used were frequently the "page" height (e.g. 250px for a short content page, 1300px for a tall page that has scrolling) or something else wrong. Here is what works for me (in Firefox 2 and IE 7) to make an iframe be as high as possible without causing the main window to have scrolling:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>Test Page</head>
<body>
<h1>Check out the cool page below</h1>
<p><a href="/">Go back home</a></p>

<iframe id="frame" src="http://google.com/" width="100%" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<script type="text/javascript">
function resizeIframe() {
    var height = document.documentElement.clientHeight;
    height -= document.getElementById('frame').offsetTop;
    
    // not sure how to get this dynamically
    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;
</script>

Hopefully this may help someone in the same situation.. your mileage may vary.

Update 10/4/2008: Eric P. noted a while ago that you need a doctype, and Ernest E. reminded me that I needed to update my example.

Technorati tags:

Comments, Pingbacks:

Comment from: Dante [Visitor]
hey Dave....thanks men... you got it... my problem works now :)
Permalink 06/21/07 @ 14:46
Comment from: Ernesto [Visitor]
Hi, that solution is very clean. I was looking for something like that for a while, so, thankyou very much.
Permalink 07/18/07 @ 18:19
Comment from: david [Visitor]
Didn't work for me. Still displays the iframe at about 200px high. I can't share the site, it's on a test server only visible within my work's firewall.
Permalink 07/19/07 @ 19:58
i blogged about simular solution that works in IE and FF.
Permalink 09/15/07 @ 05:50
Comment from: Nyi Nyi [Visitor]
Dave,

Thanks.
I tried out a lot on this problem.
You code is perfect for my problem.
Permalink 10/10/07 @ 06:34
Comment from: Pip [Visitor]
Super thanks a lot!
Permalink 11/08/07 @ 06:39
Comment from: NNM [Visitor]
This will only work if you have static HTML pages..
If you have a datagrid for example showing records based on a search or anything that gets made after the transfer to the frame, you are still stuck at the height set by the javascript function.. .
Permalink 11/15/07 @ 09:15
Comment from: Greg [Visitor]
Hey, thanks!
I've fought days with that problem and this solved it.
Permalink 12/31/07 @ 17:39
Comment from: David Tenser [Visitor] · http://djst.org/blog/
Thank you!
Permalink 01/20/08 @ 12:40
Comment from: littlehogarth [Visitor]
My iframe contained mainly text and your resizeIframe function was almost working perfectly except for a white area over part of the text near where the original size iframe bottom border.
This was fixed by setting a height in the iframe at a pixel height of 500 and then allowing resizeIframe to shrink the iframe rather than expand it.
Only issue now is fixing my menus so they hide when the iframe is clicked and not just the parent page.
Thanks for the code.
Permalink 01/21/08 @ 23:49
Comment from: Chojiro [Visitor] · http://rota.byethost13.com/
Hi, I tried this and it worked in IE6, but it didn't work in Opera. It seems like you can't use a percentage for the height in Opera, which is strange since you can for the width.
Permalink 01/31/08 @ 04:19
Comment from: Stewart Schatz [Visitor] · http://www.stewartschatz.com
Thanks for the trick. This was really making me frustrated. Especially because it was acting the same in FireFox as it did in IE. I expect to have to do this stuff with IE, but having FireFox act the same way was confusing.

Anyway, thanks for the post!
Permalink 02/01/08 @ 11:43
Comment from: Shawn Welch [Visitor] · http://www.signsrus.com
This is better:

On the frame page:




...content...



On the main (top) page:



function set_frame(height) {
var height = parseInt(height);
height += 10;
document.getElementById('frame').style.height = height +"px";
};



Where the iframe has an id of 'frame'
Permalink 02/08/08 @ 12:59
Comment from: Shawn Welch [Visitor] · http://www.signsrus.com
Sorry...

Frame page:




content...



Main (top) page:



function set_frame(height) {
var height = parseInt(height);
height += 10;
document.getElementById('frame').style.height = height +"px";
};



Where the iframe has id 'frame'
Permalink 02/08/08 @ 13:02
Comment from: Shiji Joseph (dreambouy) [Visitor]
Folks, To fix the iframe height issue, I added the following code at the end of my page.(page within the iframe)


parent.window.document.getElementById("").height = document.body.offsetHeight ;


It worked perfectly. At some places, the height was not coming properly, so I added 25 or 50 to reach my requirement. Try using this in the above code..
document.body.offsetHeight + 25

Try it out and let me know if you find any issues.
Permalink 02/09/08 @ 19:49
Comment from: Mark [Visitor]
Hey, thx for a lot - I have been struggling with this on and off for some time now - great little post.
Permalink 03/10/08 @ 09:54
Comment from: Andrews [Visitor]
Thank you very much!!!
With a first glims it seems that this is what i was looking for ,last week my eye became googles trying to fix this problem.
Permalink 03/17/08 @ 11:02
Comment from: 1Earth [Visitor] · http://www.1earthadventures.com/
Thanks for Dave. I have 3 IFrames, two thin ones top and bottom of a big middle one and the code worked a treat. All I had to do was minus the 100px at the bottom for the bottom frame.

Would love to show you where, but it's on the company Intranet.

Thanks for the effort and sharing your knowledge.
Permalink 04/03/08 @ 02:54
Comment from: jase [Visitor] · http://something.com
NIIIIIIIIIIIIIIIIIIIIIIIIIICE thank you
Permalink 04/14/08 @ 20:34
Comment from: Nathan Fluet [Visitor] · http://fosdesigns.com
Amazing I have tried about 20 different resizing functions yours works perfect in IE and FireFox,
any chance of something like this for Opera or is it true what I heard about Opera onresize being broken?
Permalink 04/18/08 @ 05:15
Comment from: kev [Visitor]
it works unless you specify a width to the iframe- then in firefox (yuck) it screws up. In Safari (yeay) it works perfectly and fills the full height of the window
Permalink 05/21/08 @ 15:04
Comment from: eric [Visitor]
It works well under IE7. Thanks!
Permalink 05/27/08 @ 10:47
Comment from: Eric P. [Visitor]
If you use Dave's code, and your IFrame does not fully resize to the height of the parent page (the page containing the IFrame), then make sure that the page containing the IFrame has the following DOCType in top:



Thanks for the great snippet, Dave!
Permalink 05/30/08 @ 07:59
Comment from: Sydneystar [Visitor]
i am new to programming, this is my first project and i am working on a fix. i frames are used in the application and this application pulls reports, when user are selecting the report from the dropdown, it is opening in a small window, width is fine but the height very less, to view the entire report, users have to scroll down, now, i want the report to open a big frame. Unfortunately, i can not share the URL but code looks like this:







Please help :-(
Permalink 06/25/08 @ 10:50
Comment from: francis [Visitor]
Not only your page solved my problem, but it appeared on top of the google search page, so it solved it in less than 5 minutes (7 if I count writing this!) You made my day!
Permalink 08/04/08 @ 04:27
Comment from: Federico Fanton [Visitor]
Thanks :) IE7 is driving me crazy..
Permalink 08/12/08 @ 03:54
Comment from: Ken [Visitor]
Finally, a solution that works. Thanks Dave. I've been searching online for hours for a solution that works in both IE6/7
Permalink 08/22/08 @ 20:28
Comment from: hyuni [Visitor]
thank you!!!! this is what i needed!
Permalink 09/01/08 @ 18:45
Comment from: Sajjad [Visitor]
genious! *hugs & kisses*
Permalink 09/12/08 @ 13:06
Comment from: robelmo [Visitor]
Great job, you have saved me hr upon hr of frustration!, thanks :)
Permalink 11/04/08 @ 11:48
Comment from: Mace [Visitor]
Thanks Dave, nice work...
Permalink 11/14/08 @ 13:06
Comment from: TaunT [Visitor] · http://taunt.ru
take this problem, thanks for solution
Permalink 12/24/08 @ 04:51
Comment from: Mohit Anand [Visitor] · http://www.travelindia-guide.com
Won't work for me. All I am trying is to include amazon's astore into my page, but the height never gets resized automatically.
Permalink 12/30/08 @ 16:37
Comment from: Jason [Visitor]
you rock! thank you for posting this code!
Permalink 01/01/09 @ 17:20
Comment from: Dartax [Visitor]
Yeah it´s work, but only after refresh. I am not able find why. Any idea?
Permalink 02/01/09 @ 05:11
Comment from: Costyn [Visitor]
Thanks man, your little piece of code works perfectly!
Permalink 02/05/09 @ 14:41
Comment from: Deimos [Visitor] · http://www.demofilo.it/sito
It work great, but i got a little problem...

If I disable the browser' scrollbar the script wont work anymore...

Same if I disable the Iframe scrolling..

It works fine on FF and Opera, but IE will show his own scrollbar.

Any idea??

p.s. I use the Iframe to cover the whole page.
Permalink 02/27/09 @ 06:06
Comment from: Canton Becker [Visitor] · http://cantonbecker.com
Thanks so much for this. I just tired about 3 or 4 "solutions" that didn't work at all. Yours fits the ticket perfectly.

Permalink 03/03/09 @ 14:45
Comment from: Nripin [Visitor]
Love your code mate !!!!
Permalink 03/04/09 @ 10:54
Comment from: Bernard [Visitor]
Outstanding!!!!
Permalink 03/13/09 @ 12:59
Comment from: ArleyM [Visitor] · http://arleym.com
Many thanks man, got it working where others failed.
Permalink 03/31/09 @ 09:28
Comment from: Christos V [Visitor]
Thank you very much,
that is exactly what I was looking for
Permalink 04/16/09 @ 11:09
Comment from: Rupert [Visitor] · http://www.thebutterflytent.com
Thanks, that's a real help.
Permalink 05/27/09 @ 05:56
Comment from: Fresh [Visitor]
Great solution. Plugged it in. Added an ID attribute of id="frame" to my iframe and good to go! Thanks.
Permalink 06/05/09 @ 14:13
Comment from: Beauford [Visitor]
How can this possibly work. The script is after the iframe with no reference to it.

Permalink 06/17/09 @ 11:52
Comment from: Dave Brondsema [Member] · http://brondsema.net/
@Beauford The frame has id="frame" and the JS gets that reference with getElementById('frame')
Permalink 06/17/09 @ 18:25
Comment from: graham [Visitor]
i have found that this doesnt work if the iframe has "runat=server". i have to run have my iframe server side as i reference it in code behind so i can pass dynamically generated url's to it on the fly. how to i size my iframe to screen in IE7 given that i have to run it server side?
Permalink 06/23/09 @ 05:47
Comment from: RoyCreative [Visitor] · http://www.roycreative.com
Hm, I was looking for the browser to adjust it's height based on the size of the iFrame content, but this works just fine! Thanks so much!
Permalink 07/02/09 @ 21:46
Comment from: Scott J. Edelman [Visitor] · http://www.vectradesigns.com
Man, I am so grateful that you actually know the correct javascript to make the heights of iframes 100%. Works with IE 8.0.6, Firefox 3.0.1, Chrome 2.0.1, Opera 9.64, & Safari 4 public beta(windows).
Permalink 07/07/09 @ 17:07
Comment from: jan [Visitor]
whahah your problem works now? kk snagga
Permalink 08/26/09 @ 07:46
Comment from: web [Visitor] · http://www.spiralteck.com
it didn't work for me
Permalink 08/31/09 @ 05:41
Comment from: Jason Saunders [Visitor] · http://www.tennisballdryer.com
Nice one, I have spent a whole day trying to solve this, searching for solutions and trying dozens of different java script solutions, none got round the 200 pix high iframe except you sir.

Many thanks, you should be knighted, thats how happy I am.

Cheers

Jason
Permalink 10/15/09 @ 15:48
Comment from: anonymous [Visitor]
No need for javascript.

All you have to do is make sure the
Html and body tags have height set like





Permalink 12/30/09 @ 10:01
Comment from: anonymous [Visitor]
Oops...

like:

<html style="height:98%">
<body style="height:98%">
<iframe style="height:100%">
</iframe>
</body>
</html>
Permalink 12/30/09 @ 10:04
Comment from: judef [Visitor] · http://developerspeaks.blogspot.com
Hi the code was very helpful, but it shows a java script error in IE8/7...could you please fix that...
Permalink 01/02/10 @ 04:35
Comment from: judef [Visitor] · http://developerspeaks.blogspot.com
sorry the code is perfect no JavaScript errors...it was my typo
Permalink 01/02/10 @ 04:54
Comment from: Hall [Visitor] · http://esotericbooks.deds.nl/
I did not work in firefox. I combined 2 scripts and now it's fine:



function resizeIframe() {

var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )

{
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}

myHeight -= document.getElementById('frame').offsetTop;
myHeight -= 0; // some height here for footer height etc
document.getElementById('frame').style.height = myHeight +"px";

};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
Permalink 01/11/10 @ 09:06
Comment from: Hall [Visitor] · http://esotericbooks.deds.nl/
wrong code above

right code here



function resizeIframe() {

var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )

{
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}

myHeight -= document.getElementById('frame').offsetLeft;
myHeight -= 0; some extra height here
document.getElementById('frame').style.height = myHeight +"px";

};
document.getElementById('frame').onload = resizeIframe;
window.onresize = resizeIframe;
Permalink 01/11/10 @ 09:10
Comment from: Hall [Visitor] · http://esotericbooks.deds.nl/
I give up. It's sending other code than I have pasted here. Just delete my messages.
Permalink 01/11/10 @ 09:11
Comment from: Xiawa [Visitor] · http://xiawa.my
thanks! ur code works like a charm :)
Permalink 02/25/10 @ 04:32
Comment from: Doey [Visitor]
Works fine with with Opera 10.5.
I had resizing and such and got Opera/IE to work, but Firefox was still giving me problems.

Thanks for the help.
Permalink 03/12/10 @ 21:17
Comment from: T. Tran [Visitor]
After several results found by searching and failure from each, your example is the only one that worked.
Thank you.
Permalink 03/16/10 @ 21:13
Comment from: Test [Visitor]
This code works awesome...After trying a lot of options, this is only one which is working totally fine.
Permalink 03/26/10 @ 14:35
Comment from: lo k [Visitor]
thank you. no, seriously...
Permalink 04/15/10 @ 08:18
Comment from: alan [Visitor]
thank you for the trick!
Permalink 04/19/10 @ 11:09
Comment from: blestab [Visitor] · http://blestab.blogspot.com
Worked like a charm, thanks a lot
Permalink 05/10/10 @ 05:47
Comment from: Alek [Visitor]
You rock. This is the only thing i have found to work.
Permalink 05/20/10 @ 16:01
Comment from: David [Visitor]
Great! This was the ONLY thing that did the trick!
Permalink 05/27/10 @ 07:36
Comment from: SDTacoma [Visitor]
Show me the demo! No demo, I'll assume you couldn't get it to work either.
Permalink 06/09/10 @ 16:57
Comment from: Kerry [Visitor]
Thaaaaaaaaaaaanks for this!
Permalink 06/25/10 @ 18:56
Comment from: Bingo Karten [Visitor] · http://www.bingo-training.de/
I have spent a whole day trying to solve this, searching for solutions and trying dozens of different java script solutions, none got round the 200 pix high iframe except you sir.Many thanks, you should be knighted, thats how happy I am.
Permalink 07/26/10 @ 08:44
Comment from: Samantha [Visitor]
Hi, I am trying to resolve the min-height issue in Safari but I am trying to do this with a div, css and full screen bg. How would I have to adapt the code to work within my site?

I'm using this example:
http://css-tricks.com/examples/FullPageBackgroundImage/

Thanks in advance!
Samantha
Permalink 08/23/10 @ 12:02
Comment from: Luca [Visitor]
Doesn't work for me.
The iframe does change its height but it stops at an eight of about 888px.

This is not good when pages loaded inside the iframe have a big height.

Any ideas to sort out this issue?

Thanks,
Luca
Permalink 09/22/10 @ 04:26
Comment from: Luca [Visitor]
it works :)
there was a scrolling="no" inside the iframe.
I put it away and noe it works fine.
Great!
Permalink 09/22/10 @ 05:16
Comment from: Martin [Visitor] · http://www.das-automat.ch
Thanks a lot. You really helped me out. I use the script and put your name and site in the source. Is this ok with you?
Permalink 09/22/10 @ 20:59
Comment from: RichCowell [Visitor] · http://Local Intranet
Works perfectly in IE8, but can't get it to work in Firefox 3.6...
Permalink 12/02/10 @ 03:26
Comment from: aknsoft [Visitor] · http://emlak.aknsoft.com
its perfect
Permalink 03/06/11 @ 04:54
Comment from: huss [Visitor]
thanks..its works fine but how to do for three iframe side by side.width of 10%, 70% and 20% and height for all 3 are 100%, when i try to add with your script, 1st iframe works fine, but then second one isnt displayed with full 100%..how should i do?? please help.
Permalink 05/27/11 @ 10:49
Comment from: Karsten [Visitor]
Great script, but I am puzzling with something slightly different: This script sets the iframe height to 100% relative to the full page, However I would like to set the iframe hight to 80%, does anyone have any suggestions for that?

Alternatively I would be happy if I could set the iframe not to 100% of the window size, but to 100% of the parent div (which I would set at 80% itself).

Any help is much appreciated

Permalink 08/04/11 @ 07:56
Comment from: Stephen [Visitor]
Is anybody having trouble in IE9 (Win 7 x64)? IE8 is working fine in Win XP.
Permalink 11/30/11 @ 23:45
Comment from: Stephen [Visitor]
Sorry I can't provide a link because it is in non-disclosure. (Even changing compatibility mode in IE9 is not working)
Permalink 11/30/11 @ 23:49
Comment from: Stephen [Visitor]
Found out I need to manually resize the window in IE9 to get it to work. Not the case in any other browser. Any suggestions?
Permalink 12/01/11 @ 00:56
Comment from: Earnst Dean [Visitor] · http://www.customsigns.com
OMG, thank you...
Permalink 01/10/12 @ 09:11
Comment from: Falco [Visitor] · http://studiomoderno.com.br
Thank you.
Permalink 01/10/12 @ 16:08
Comment from: Sandhya [Visitor]
Thanks
Permalink 01/19/12 @ 02:15
Comment from: Victor Haine [Visitor] · http://bpro.myvnc.com
Thank you! Your solution saved me of an head-pain!

Thanks!
Permalink 03/26/12 @ 21:34
Comment from: Bill [Visitor]
"If you feel this is an error, please bypass this message and leave us a comment about the error."

I got your message by coming to the site from a direct link in a Google search result.
Permalink 07/25/12 @ 15:37
Comment from: Lucas [Visitor] · http://millipaid.atspace.cc
So thank you man.
You are my Hero! I was looking for a good solution at this problem. I tried so many code or script but this one is the first that is really working for me.
I'm happy.
thanks
Permalink 08/08/13 @ 09:56

Leave a comment:

Your email address will not be displayed on this site.
Your URL will be displayed.
What is the 2-letter abbreviation for Michigan?
Allowed XHTML tags: <p, ul, ol, li, dl, dt, dd, address, blockquote, ins, del, span, bdo, br, em, strong, dfn, code, samp, kdb, var, cite, abbr, acronym, q, sub, sup, tt, i, b, big, small>
Options:
 
(Line breaks become <br />)
(Set cookies for name, email & url)

<  August 2014  >
Mon Tue Wed Thu Fri Sat Sun
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Categories


Archives

Misc

Syndicate this blog XML

powered by
b2evolution