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>
Digg this
post to del.icio.us
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