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%
}
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%
}
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.
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!
yes you are right, my frame is in a div.
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 :)
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.
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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.