CSS Code, DHTML Code

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

27 Comments

  1. Thank you, it worked for me, I would like to append that you can not even use a form tag in the middle.

  2. In the middle of what? I use a form within an iframe all the time!

  3. GREAT! THANX!

    This really did the trick, had been googling around for hours!

    //Torsten

  4. Oh, yeah. Finally I've found it. Indeed it does work! THX

  5. Thanks – this was very helpful.

    BR

  6. Didn't work here. And you really need to change that black text on black background in your textboxes…

  7. On IE7 I can still see double window borders although I'm using border: 0 or none.

    Is there a workaround?

    Thanks

  8. This did the trick for me too!
    although it just moved another object in my page, something to do with the tags maybe

  9. Doesn't seem to work with XHTML 1.0 transitional.

  10. I figured it out. Since I am using a table in there, I have to set my td to height: 100% as well.

  11. Excellent guide. It works perfectly. Thanks a bunch, Justin!

  12. Thanks for the advice. It worked great.

  13. Thank you very much Justin! works for me both in IE8 & FF 3.0!!

  14. @Fadi EDWARD

    You are so right. No Form TAG!!! Remove all Parent form tags

  15. Very Very tnkx, i used for IE8!!

  16. very good
    work fine on ie6, ie8, & mozilla 3.0.10
    Thanks

  17. Many thanks my friend. I was looking for this.

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

  19. Rock on!! Thanks for the fix. I was going nuts with this one.

  20. Its really helpful, and working in all browsers. Thanx

  21. Thank you, that worked for me too! Good stuff.

  22. Thanks a lot. You made my day.

  23. This sample work fine on ie7, ie8, ie9, mozilla 3.0.10 and mozilla 4.0

    iframe example

    html, body, div{ margin:0; padding:0; height:100%; border: none; overflow: hidden; }
    iframe { margin:0; padding:0; height:100%; display:block; width:100%; border:none; overflow: inherit auto;}

    example.org

  24. Really easiest way to set height for iframe. I wasted lot of hours then searched in net and use this code. Thanks a lot

  25. You have no idea how much this just saved me. Thank you!!

  26. that's really cool, it worked in firefox 3.6 and firefox 5.
    thank you :)))

  27. If you have a complicated layout structure setting height of all divs to 100% may break the page layout. In this case I recommend using javascript to set the height of iframe to 100%. In my case I used JQuery, but I believe pure javascript DOM functions should also work. I set the height of iframe equal to parent div height:

    $('#doc-preview iframe').height($('#doc-preview').height());

    Here the doc-preview is an id of iframe's parent div.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image