CODEWITHSUNDEEP
cssfirefoxiframeheightfirebug
ServAce85
ServAce85

Reputation: 1622

Iframe height not displaying correctly in Firefox only

I have created a page that has similar functionality to that of the DiggBar (i.e. a header of specified height and an iframe below filling the rest of the page).

I had this working a while back with desired results, but all of a sudden the height of the iframe has gone from 100% of the remaining page height to only 44.8px. The catch is that this is only occurring in one browser — Firefox on Ubuntu.

I thought that this should be happening in all other browsers, but it's not. It displays correctly in IE, FF, & Chrome on Windows and Chrome on Ubuntu.

Finally, using Firebug, I have selected inspect element to try to determine what's going on, but it only tells me that my height is defined to be 100%, but that it is computed to be only 44.8px.

I am looking for some guidance as to how best to debug this issue because I have completely run out of ideas. I didn't think that it would be necessary to post all of the code that produces this problem, but if any is absolutely needed, just ask.

Thanks.

Upvotes: 3

Views: 3362

Answers (2)

Armen
Armen

Reputation: 21

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.

Make sure to run this script after the page has been loaded.

Upvotes: 2

ServAce85
ServAce85

Reputation: 1622

Unfortunately the Cascading part of the Cascading Style Sheets threw me off. I had another (let's call it 'hidden') reference to the parent of the iframe which caused the weird height calculation issue.

Funny that this only happened in my Ubuntu version of Firefox, though.

Upvotes: 2

Related Questions