February 19th, 2007
How to set an iframe to 100% height in FireFox
Here's the HTML code to implement if you'd like to embed another web page in an iframe on your web site, but would like it to appear as the entire page. This makes it hard to detect that the page is within an iframe. It's easy to do in IE, just set the iframe height and width to 100%. But this is invalid markup and won't work in FireFox. Here's the code to make it work, with CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>iframe example</title>
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
</style>
</head>
<body>
<div>
<iframe src="http://example.org/" height="100%" width="100%">
<p><a href="http://example.org/">example.org</a></p>
</iframe>
</div>
</body>
</html>
<html lang="en">
<head>
<title>iframe example</title>
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
</style>
</head>
<body>
<div>
<iframe src="http://example.org/" height="100%" width="100%">
<p><a href="http://example.org/">example.org</a></p>
</iframe>
</div>
</body>
</html>
on May 20th, 2007 at 9:03 am
Thank you, it worked for me, I would like to append that you can not even use a form tag in the middle.
on May 20th, 2007 at 9:56 am
In the middle of what? I use a form within an iframe all the time!
on June 26th, 2007 at 5:46 pm
GREAT! THANX!
This really did the trick, had been googling around for hours!
//Torsten
on August 26th, 2007 at 6:03 pm
Oh, yeah. Finally I've found it. Indeed it does work! THX
on September 11th, 2007 at 3:31 am
Thanks – this was very helpful.
BR
on September 25th, 2007 at 2:40 am
Didn't work here. And you really need to change that black text on black background in your textboxes…
on January 14th, 2008 at 5:16 pm
On IE7 I can still see double window borders although I'm using border: 0 or none.
Is there a workaround?
Thanks
on January 31st, 2008 at 10:30 am
This did the trick for me too!
although it just moved another object in my page, something to do with the tags maybe
on December 9th, 2008 at 11:02 pm
Doesn't seem to work with XHTML 1.0 transitional.
on December 9th, 2008 at 11:12 pm
I figured it out. Since I am using a table in there, I have to set my td to height: 100% as well.
on January 18th, 2009 at 2:12 am
Excellent guide. It works perfectly. Thanks a bunch, Justin!
on March 10th, 2009 at 3:22 pm
Thanks for the advice. It worked great.
on March 14th, 2009 at 8:06 am
Thank you very much Justin! works for me both in IE8 & FF 3.0!!
on April 20th, 2009 at 7:23 pm
@Fadi EDWARD
You are so right. No Form TAG!!! Remove all Parent form tags
on May 11th, 2009 at 6:11 pm
Very Very tnkx, i used for IE8!!
on June 4th, 2009 at 7:04 am
very good
work fine on ie6, ie8, & mozilla 3.0.10
Thanks
on June 19th, 2009 at 9:53 am
Many thanks my friend. I was looking for this.
on June 25th, 2009 at 7:36 pm
I'm using the latest version of FireFox. I have an issue with the scroll bar when I'm using the above code. A scroll bar appears for the iframe no matter what, even if it's entirely pointless. It appears even if the content is nothing more than "Hello World". What's the deal? Anybody else have this issue or know how to resolve it?