Height and Overflow on Firefox.

Does overflow stretches the height of a div?

[fischermx]

In this very simple code :

#mainContent
{
border:solid black;
height:300px;
overflow:visible;
}

<div id="mainContent">
<p> asdf qwer asdf </p>
<p> asdf qwer asdf </p>
<p> asdf qwer asdf </p>
<p> asdf qwer asdf </p>
<p> asdf qwer asdf </p>
<p> asdf qwer asdf </p>
<p> asdf qwer asdf </p>
<p> asdf qwer asdf </p>
<p> asdf qwer asdf </p>
<p> asdf qwer asdf </p>
<p> asdf qwer asdf </p>
</div>

The content of div overflows the 300px height. In IE, the container div stretches to make all the content fit on it. In Firefox the div keeps a fixed height.

What's the solution to have both a minimum height and an stretchable container?

[Robin_reala]

#mainContent {
 min-height: 300px;
}
* html #mainContent {
 height: 300px;
}

Firefox and other standards compliant browsers obey the min-height declaration. IE doesn't understand it and gets a height declaration that only it understands in the *html block.

[createErrorMsg]

In IE, the container div stretches to make all the content fit on it. In Firefox the div keeps a fixed height.

IE has an auto-enclosing behavior which caused it to expand an element's width or height to match that of it's highest or widest content. In other words, it changes the actual calculated value of the width or height property so that the content stays inside of the element. FF does not have this behavior, choosing instead to honor your wishes and allow content to spill out of an element with an explicit width or height.

the solution to have both a minimum height and an stretchable container

Since IE's misguided behavior is, in this case, actually giving you what you want, the trick is to get FF to emulate this behavior. To do that, you;ll want to use the min-height property.

div{min-height:300px;}

IE doesn't support min-height (nor min-width), but this isn't too big a deal, since that auto-enclosing behavior essentially means that, in IE, regular height and width acts like min-height and min-width do, anyway. So you want to give FF the above code, but NOT an explicit height value, while giving IE an explicit height value that matches the min-height. There are many ways to feed various properties to various browsers. Use your hack of choice for this. For no reason othat than it's been discussed a lot lately, I'll use the!important hack...

div{min-height:300px;height:auto!important;height:300px;}

You could just as easily use *html, the underscore hack, move the height style into an IE-only stylesheet (BING! BING!), whatever. Just as long as FF gets the min-height and an auto height, and IE gets a height equal to the min-height, you're golden.

cEM

[edit] Oops. Robin beat me to it. :)[/edit]

[Robin_reala]

Yeah, but your's was a far more detailed answer CEM :) I should start actually bothering to write these up.

[fischermx]

I found, what I think it is the "underscore" hack in other place :

#mainContent
{
min-height:400px;
_height:400px;
}

It works perfectly to both IE and FF.

The "!important" hack, does not seem to cause the same exact behavior. In IE when there's too few content the div shrinks.
Is this expected in this hack?

[createErrorMsg]

The "!important" hack, does not seem to cause the same exact behavior. In IE when there's too few content the div shrinks.

Strange. The results are identical for me. You have to have 2 of the same property in the same rule declaration, with the one for FF having the!important and the one for IE not. I'm unsure whether the order matters, but I've always seen it the way I showed it above.

Regardless, it's not a very good hack, anyway, IMO (none of them are). The best approach is to feed IE it's own stylesheet.

cEM