View Full Version : CSS/iframe 100% height issue.

09-15-2011, 06:07 AM
I'm trying to include an iframe in my html/css, but running into a problem with the height.

The containing div (#mlsContent) is not stretching vertically even though the css has the height set to 100%. It also doesn't seem to recognize a min-height, but functions properly to a defined pixel value.
I thought that the problem might be from float collapsing, but even when i include a div at the end with clear:both; it doesn't expand the containing div to fill the height of the iframe.

Is this an issue specific to the iframe, or do i just not understand css layout fully?


09-15-2011, 08:46 AM
Height:100% only works of an element if It's parent element's height defined.

cross-browser min-height code is given below:

.classname {
height:auto !important;

09-15-2011, 07:27 PM
I included that CSS code to the iframe's parent element, but the iframe is still not expanding to the height of the div.


09-15-2011, 07:41 PM
whats parent of iframe.. if its not HTML or BODY ... start from there... if height is not defined for any element in between....

09-16-2011, 01:50 AM
gave that a try. put

height:auto !important;

on every parent element between html and the iframe... when i use firebug, i can see that the div has enough space to hold the contents of the iframe, but the iframe just doesn't stretch even though it has a window to work within.

09-16-2011, 01:53 AM
it looks like the source of the iframe uses javascript to resize the window. do you think this could be the problem? would i have to use javascript to resize the iframe?