iframe height [Archive] - CodingForums.com

View Full Version : iframe height

realtimethrill

03-14-2006, 05:24 AM

Hi
I have a fixed-pixel width IFRAME, the height of which I'd like to stretch/shrink according to screen resolution -which (I think) means using a percentage value (?).

Since dispensing with a table surrounding the iframe, and using a new doctype, I just cannot get the height of the iframe -even using it's parent DIV -to be specified as a percentage -the browser just renders it really small.

In fact, the only reason I have the iframe contained in a div is to center it horizontally (I just gave up trying to centering it vertically!)

Could someone tell me where I'm going wrong? Have I come up against cross-browser bug for which I need a hack? Or perhaps I'm just clueless!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...
...
<div style="margin-left:auto; margin-right:auto; width:750px; height:60%;"> 

<iframe id="content" src="news.xml" scrolling="auto" style="border-style:hidden; width:100%; height:100%;">
</iframe>

</div>

I've tried styling the iframe directly with no luck.

Thanks for any help.

_Aerospace_Eng_

03-14-2006, 05:42 AM

Wait why are you using a frameset doctype? Just because you are using an iframe doesn't mean you need to use a frameset doctype. In fact an iframe is normal HTML. Its not a frameset. Once you find the proper doctype to use. Either transitional or strict you will need to set the html and body to a height of 100% in the CSS.

realtimethrill

03-14-2006, 05:55 AM

Thank you for the reply.

I changed the doctype, and tried both strict and transitional XHTML.

What seemed to do the trick was styling the BODY to 100% height (although this caused scrolling which wasn't there before). Now, in IE6, the iframes height is set perfectly!

It doesn't work in Firefox (on Windows) though.
Any ideas?

looka

03-14-2006, 06:15 AM

no, no. divs has already eaten my nerves when setting height, especially percentage.

you just put table in the body with 100% width and height, that will assure you will have it streched at window height and width.
no need to body 100% height, just table. works either with html or css.

if you have problems with setting cellspacing with css, you can use border-collapse:collapse;

realtimethrill

03-14-2006, 06:34 AM

no, no. divs has already eaten my nerves when setting height, especially percentage.
Good to know I'm not the only one!

I'm trying not to use tables. (My table solution was working fine I think until I started trying to apply an XHTML doctype). But anyway, I'll persist with div height percentage for a bit (famous last words!)

I don't understand why I need to set the width of anything to 100%, but I did this to style the <body>, and, as I say, got extra scrolling. I tried adding margin:0; which got rid of that. It works great in IE -the div % height is now fine, but in Firefox the height of the iframe is still woefully wrong.

looka

03-15-2006, 06:21 AM

have you tried to set 100% height directly to iframe?

realtimethrill

03-15-2006, 07:14 AM

I've tried styling the iframe directly. Again, in IE this works fine, but in Firefox the height seems determined to stay incorrect if I use a percentage value.

I keep thinking I must be doing something wrong if what I'm doing works in IE but not a Mozilla browser. Apart from having to add <body style="height:100%; margin:0px;">, IE is rendering how I would expect a browser to from my understanding of CSS, whereas Firefox is not.

So perhaps I've just misunderstood CSS.

looka

03-17-2006, 10:14 AM

i have always worked with tables - width and height set to 100% value..

works fine to me.. IE and FF...

fyo

03-17-2006, 12:36 PM

Tables are the exception to the 100% height rule. You cannot set a div or iframe or object or... to height: 100% and expect it to fill the whole height. It just doesn't work that way; and it isn't supposed to.

If you REALLY want to do it, you need to use JavaScript to get the height. Preferably using proper DOM-style JavaScript.

realtimethrill

03-17-2006, 02:10 PM

Thanx for the help.

I realise I wrote the original question rather badly... I don't require the iframe's height to be 100%, but 60%. (I assume this is significant because fyo mentioned "the 100% height rule").

I'm trying not to use tables because I keep reading that that's the way forward! Also, I'm advised it's optimal to have a site looking good even without Javascript turned on in the browser.

Is it really so troublesome to set the height of an div or iframe with a percentage value??

The following works on IE, but not Firefox:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...
<style type="text/css">

</style>
...
<div style="margin-left:auto; margin-right:auto; width:750px; height:60%;"> 
<iframe id="content" src="news.xml" scrolling="auto" style="border-style:hidden; width:100%; height:100%;">
</iframe>
</div>

Again, apart from having to do <body style="height:100%; margin:0px;">, IE renders according to what seems to make sense... whereas Firefox does not. aaaaaahhhhhhhhh!

Any more thoughts appreciated!

fyo

03-17-2006, 10:21 PM

I don't require the iframe's height to be 100%, but 60%. (I assume this is significant because fyo mentioned "the 100% height rule").

Ahhh no, that's me being imprecise. It's the %-height that's the problem. You just can't do it that way in CSS. I'm not 100% (lol) sure what the reasoning behind this is, but the reality is that the W3 CSS specifications just "say so".

To the best of my knowledge, there are only two ways around it: Use a table (does that even always work? Or only in quirks mode?) or use JavaScript to get the height.

realtimethrill

03-18-2006, 12:53 AM

Thank you.
This is why even simple Web development drives me insane! Am I really asking so much? I should go back to eating pies all day...

So I must either use a table or set the height in Javascript...

Again, stuff working seemingly as it should in IE, but not Firefox, seems kinda troubling!
I read: don't use tables, don't depend on Javascript, design for Mozilla not IE -I dunno if that's written by people who actually make stuff! :)

(Hopefully someone's gonna tell me I'm all wrong, then I'll see the light!)

fyo

03-18-2006, 01:21 AM

There is a simple work-around that doesn't require JavaScript, but I don't know VALID it is according to the spec. It seems to work, but I really don't know WHY it would work, since it would seem to have the same problem is the "normal" CSS height work-around (setting body height to 100%)... and that is to set the body's parent's height to 100% as well. The body's parent being the html node in DOM speak.

It works, but I don't know why.

Do'h!

03-18-2006, 09:44 AM

hey buddy chear up try this;

<th width="500" rowspan="6" scope="col"><iframe src="index1.html" name="iframe" width="765" marginwidth="0" height="700" marginheight="" align="top" scrolling="auto" frameborder="0</iframe></th>

jacobfogg

07-11-2007, 07:48 PM

I can feel your pain! That's why we get paid the big bucks huh?

What you are reading about tables and JavaScript is right in it's own respect... regarding tables, you should TRY to not use them for formatting and layout... And I feel there is very good reasons for this, especially concerning forward compatibility... HOWEVER... with that said, there are just some things that you can't do without either using tables or JavaScript... when you are trying to produce sites with cross browser/backwards compatibility the tables are the better of the two evils...

Regarding JavaScript, you should always take an "Unobtrusive" route of implementation... except in very rare circumstances use the JavaScript to Enhance your site, not rely on it.... Furthermore it should be built with graceful degradation... meaning that older browsers will just not implement the older features they don't support and not just break completely....

I'm sure this reply is way too late, but hopefully it will still help someone.

dreambouy

02-10-2008, 12:56 AM

Folks, To fix the iframe height issue, I added the following code at the end of my page.(page within the iframe)

<script type="text/javascript">
parent.window.document.getElementById("<FRAME_NAME>").height = document.body.offsetHeight ;
</script>

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.

dreambouy

02-10-2008, 12:57 AM

dreambouy

02-10-2008, 12:58 AM

kraftomatic

09-25-2008, 08:14 PM

This doesn't work. Is the code complete? And are you able to use this across more than one domain (example: the iframe resides elsewhere).

Daddy Cool

10-05-2008, 10:56 AM

Just don't forget to add style to the <html> tag

<style type="text/css">

</style>

####

<iframe src="http://....." style=" border-width:0 " width="100%" height="98%" frameborder="0" scrolling="no"></iframe>

==
If you put 100% height to the iframe, depending of the browser, you'll have a scrolling bar of 5 to 10 px, that's why I use 98%. This is working perfectly throught FF, Opera and Chrome and IE7.
:thumbsup:

If you want to achieve exact 100% height (no more, no less), as said, you'll have to do it via JS/DOM scripting.

wyattwong

02-17-2009, 01:06 AM

I tried many different attributes to located the iframe height but no luck until I read a thread elsewhere and found the attribute name is called "offsetHeight" instead of "height", you can access the properties as follows:

var iframeHeight = document.frames[<iframe_id>].document.body.offsetHeight;

Substitute the <iframe_id> with the ID name of your iframe object !

pollardhimself

08-04-2010, 03:04 PM