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: iframe • javascript
Comments, Pingbacks:
Comment from:
Dante [Visitor]
hey Dave....thanks men... you got it... my problem works now :)
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.
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.
07/19/07 @ 19:58
Comment from:
arowanna [Visitor]
· http://www.arolabs.com/javascript/automatically-resize-iframe-height-depending-on-content/
i blogged about simular solution that works in IE and FF.
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.
Thanks.
I tried out a lot on this problem.
You code is perfect for my problem.
10/10/07 @ 06:34
Comment from:
Pip [Visitor]
Super thanks a lot!
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.. .
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.. .
11/15/07 @ 09:15
Comment from:
Greg [Visitor]
Hey, thanks!
I've fought days with that problem and this solved it.
I've fought days with that problem and this solved it.
12/31/07 @ 17:39
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.
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.
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.
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!
Anyway, thanks for the post!
02/01/08 @ 11:43
Comment from:
Shawn Welch [Visitor]
· http://www.signsrus.com
This is better:
On the frame page:
On the main (top) page:
Where the iframe has an id of 'frame'
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'
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'
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'
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.
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.
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.
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.
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.
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.
Would love to show you where, but it's on the company Intranet.
Thanks for the effort and sharing your knowledge.
04/03/08 @ 02:54
Comment from:
jase [Visitor]
· http://something.com
NIIIIIIIIIIIIIIIIIIIIIIIIIICE thank you
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?
any chance of something like this for Opera or is it true what I heard about Opera onresize being broken?
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
05/21/08 @ 15:04
Comment from:
eric [Visitor]
It works well under IE7. Thanks!
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!
Thanks for the great snippet, Dave!
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 :-(
Please help :-(
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!
08/04/08 @ 04:27
Comment from:
Federico Fanton [Visitor]
Thanks :) IE7 is driving me crazy..
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
08/22/08 @ 20:28
Comment from:
hyuni [Visitor]
thank you!!!! this is what i needed!
09/01/08 @ 18:45
Comment from:
Sajjad [Visitor]
genious! *hugs & kisses*
09/12/08 @ 13:06
Comment from:
robelmo [Visitor]
Great job, you have saved me hr upon hr of frustration!, thanks :)
11/04/08 @ 11:48
Comment from:
Mace [Visitor]
Thanks Dave, nice work...
11/14/08 @ 13:06
Comment from:
TaunT [Visitor]
· http://taunt.ru
take this problem, thanks for solution
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.
12/30/08 @ 16:37
Comment from:
Jason [Visitor]
you rock! thank you for posting this code!
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?
02/01/09 @ 05:11
Comment from:
Costyn [Visitor]
Thanks man, your little piece of code works perfectly!
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.
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.
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.
03/03/09 @ 14:45
Comment from:
Nripin [Visitor]
Love your code mate !!!!
03/04/09 @ 10:54
Comment from:
Bernard [Visitor]
Outstanding!!!!
03/13/09 @ 12:59
Comment from:
ArleyM [Visitor]
· http://arleym.com
Many thanks man, got it working where others failed.
03/31/09 @ 09:28
Comment from:
Christos V [Visitor]
Thank you very much,
that is exactly what I was looking for
that is exactly what I was looking for
04/16/09 @ 11:09
Comment from:
Rupert [Visitor]
· http://www.thebutterflytent.com
Thanks, that's a real help.
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.
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.
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')
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?
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!
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).
07/07/09 @ 17:07
Comment from:
jan [Visitor]
whahah your problem works now? kk snagga
08/26/09 @ 07:46
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
Many thanks, you should be knighted, thats how happy I am.
Cheers
Jason
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
All you have to do is make sure the
Html and body tags have height set like
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>
like:
<html style="height:98%">
<body style="height:98%">
<iframe style="height:100%">
</iframe>
</body>
</html>
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...
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
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;
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;
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;
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;
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.
01/11/10 @ 09:11
Comment from:
Xiawa [Visitor]
· http://xiawa.my
thanks! ur code works like a charm :)
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.
I had resizing and such and got Opera/IE to work, but Firefox was still giving me problems.
Thanks for the help.
03/12/10 @ 21:17 Leave a comment:
