Member Avatar for developer_hand

I have a JSP page and embeded HTML code into it. I have an iframe, it works properly in Firefox, however in Internet Explorer there is a problem with its height. I adjust the height 100% but Internet Explorer seems to display my iframe in a small height.

  <iframe
class="iframe-cont" id="tree" name="tree" src="/x.html" 
style="border:0px; width:100%; height:100%" frameborder="0"
                        marginheight="0" marginwidth="0">
  </iframe>


#iframe-cont{
WIDTH:100%
HEIGHT:100%
}
Edited by mike_2000_17 because: Fixed formatting
  • 3 Contributors
  • 7 Replies
  • 298 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Lusiphur

Dani AI

Generated

Short diagnosis and direction: because the iframe sits inside a DIV, a CSS height:100% on the iframe only works if that DIV — and every ancestor up to html/body — has a defined height. correctly flagged the container as the constraint; IE8 (and IE in compatibility/quirks mode) will not compute a child's percentage height without an explicit reference. Two practical fixes are (A) give the ancestor chain a real height so percent values resolve, or (B) size the iframe from script once its content is loaded.

Minimal CSS to make percentage heights resolve (apply to your page wrapper, not just the iframe):

html, body { height:100%; margin:0; padding:0; }
#pageWrapper { height:100%; position:relative; }

If you prefer the iframe to fill a positioned container regardless of ancestor heights, use absolute positioning on the iframe (note this affects layout and floating behavior):

.container { position:relative; }
iframe.fill { position:absolute; top:0; left:0; right:0; bottom:0; width:100%; border:0; }

JavaScript approach (robust across browsers, but only works when iframe content is same-origin):

function resizeIframe(id){
  var ifr = document.getElementById(id);
  try {
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    var body = doc.body, html = doc.documentElement;
    var h = Math.max(body.scrollHeight, body.offsetHeight,
                     html.clientHeight, html.scrollHeight, html.offsetHeight);
    ifr.style.height = h + 'px';
  } catch(e) {
    /* cross-domain or security blocked — cannot access child */
  }
}

Troubleshooting checklist: confirm a standards doctype so IE isn’t in quirks/compat mode; check F12 tools for document mode; if IE behaves like older versions try zoom:1 on the parent to trigger layout; test with an explicit pixel height to narrow the problem; remember same-origin policy prevents scripted resizing for cross-domain src. These steps extend and ’s points and should get the iframe sizing reliably in IE8.

Recommended Answers

All 7 Replies

Member Avatar for Kieran Y5

I don't know why that is happening. This *should* work:
html

<iframe class="iframe-cont" id="tree" name="tree" src="/x.html" frameborder="0" marginheight="0" marginwidth="0">You browser does not support iFrames!</iframe>

CSS

.iframe-cont{
border:0px;
width:100%;
height:100%
}
Edited by Kieran Y5 because: n/a
Member Avatar for Lusiphur

Question: Is your iframe within another container such as a DIV?

If so, it is very possible that the DIV itself is restricting the iframe's height as opposed to an issue with the iframe itself.

Member Avatar for Kieran Y5

Question: Is your iframe within another container such as a DIV?

If so, it is very possible that the DIV itself is restricting the iframe's height as opposed to an issue with the iframe itself.

Maybe it's both!

Member Avatar for developer_hand

yes you are right, my frame is in a div.

Member Avatar for Lusiphur

With your iFrame inside a DIV it will be constrained to a maximum height equivalent to the height of the DIV.

Unfortunately, if the content of the iFrame is dynamically populated then what will happen is the DIV (whose height is determined by the max length of the content within it) attempts to size prior to the content being populated and sizes too small for the iFrame contents. The iFrame then sizes to 100% of the height determined by the containing DIV and is likewise too small.

One thing to note, which is unrelated to your issue but related to iFrames in general, is that many web developers are moving away from iFrames due to the fact that a large portion of end-users have security settings that prohibit the display of them. Seems that some folks had the wonderful idea of populating 1px x 1px iFrames with hostile code and now they're somewhat frowned upon.

Hope this all helps with finding the source of your issue however :)

Member Avatar for developer_hand

Thanks a good explanation, then setting DIV height 100% and width 100% will help me, because DIV should be resized by iframe content. That would be my solution.

Member Avatar for Lusiphur

Not necessarily... if it's a nested floating DIV (DIV within a DIV or other container with variable float to left/right) then you won't be able to force the DIV height and it will still only expand to the max height of it's contained parts. The only way (that I know of) to make a div 100% screen height is with absolute positioning which... then... means that you can't float that DIV horizontally.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.