Does min-height REALLY work in Firefox?

Just another “experiment” I was fooling around with.

LEAVING IE OUT OF THIS!!! I wanted to see how “min-height” was interprted by different browsers, chiefly, Safari and Firefox.

Essentially, it’s just a set of nested divs, set to MIN-HEIGHT:100%… BODY set to HEIGHT:100%.

Safari acted predictably , causing each child div to be 100% of its parent; the FIRST div being 100% of its parent-- BODY, which is set to 100% of the viewport.

But in FF only the FIRST DIV has any height AT ALL. SO in FF MIN-HEIGHT only works for a child of the BODY tag, or maybe the FIRST descendant? Is this correct? If so , how can people claim FF supports MIN-HEIGHT so adamantly?

Test for yourself :
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

&lt;head&gt;
	&lt;meta http-equiv="content-type" content="text/html;charset=iso-8859-1"&gt;
	&lt;meta name="generator" content="Adobe GoLive"&gt;
	&lt;title&gt;Untitled Page&lt;/title&gt;
	&lt;style type="text/css" media="screen"&gt;&lt;!--

body, html { height: 100% ; margin:0; }
body > div { background-color: #ccc; margin-right: auto; margin-left: auto; min-height: 100%; width: 80%; }
body > div div { background-color: #ddd; margin-right: auto; margin-left: auto; min-height: 100%; width: 80%; }
body > div div div { background-color: #eee; margin-right: auto; margin-left: auto; min-height: 100%; width: 80%; }

–></style>
</head>

&lt;body bgcolor="#ffffff"&gt;

<div>
<div>
<div></div>

</div>

</div>
</body>

</html>

A % height can only reference the set height of a parent - if the parent only has min-height set, then its set height is “auto”, and any % height referenced by a child element will also then be “auto”.

Min-height works fine for a defined size.

Centauri,

are you saying thats how FF behaves, but not safari?

That’s how FF hehaves, and what the specs say - don’t have Safari, so cannot comment on that one.

for what it worth…

you are right… setting HEIGHT: inherit… makes teh code behave consistently.

of course it’s kinda a useless experiment otherwise… putting a div with content inside overflows when the viewport is smaller than the content.

Which brings me to a different point.

shouldnt MIN-HEIGHT override HEIGHT? I mean , like in the example above… if every div is set to HEIGHT:100% MIN-HEIGHT:100% … if the child div is BIGGER than 100% shouldn’t ( as long as there is no absolute positioning) the PARENT expand to accommodate it ; given that the SMALLEST the parent can be is 100% of the viewport…?

Hi,

These issues are explained in the specs here.

<percentage> Specifies a percentage for determining the used value. The percentage is calculated with respect to the height of the generated box’s containing block. [B]If the height of the containing block is not specified explicitly (i.e., it depends on content height)[/B], and this element is not absolutely positioned, [B]the percentage value is treated as ‘0’[/B] (for [URL=“http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height”]‘min-height’) or ‘none’ (for [URL=“http://www.w3.org/TR/CSS21/visudet.html#propdef-max-height”]‘max-height’).

Therefore you can’t base a height on an element that has only a min-height specified (although some browsers such as safari will allow this) because the height is zero and 100% of zero is still zero.

shouldnt MIN-HEIGHT override HEIGHT? I mean , like in the example above… if every div is set to HEIGHT:100% MIN-HEIGHT:100% … if the child div is BIGGER than 100% shouldn’t ( as long as there is no absolute positioning) the PARENT expand to accommodate it ; given that the SMALLEST the parent can be is 100% of the viewport…?

min and max height do over-ride the height settings and if you set a height of 100px and a min-height of 200px the actual height of the container will be 200px.

Height will have a computed value of 200px. That means that the element still cannot expand pass the 200px limit but the height has been increased from the original 100px setting to match the min-height.

Setting height:100px and min-height:100px is nonsense because all you get is height 100px. (The same would hold true for 100% of course)

The following algorithm describes how the two properties influence the used value of the [URL=“http://www.w3.org/TR/CSS21/visudet.html#propdef-height”]‘height’ property:

  1. The tentative used height is calculated (without ‘min-height’ and [URL=“http://www.w3.org/TR/CSS21/visudet.html#propdef-max-height”]‘max-height’) following the rules under [URL=“http://www.w3.org/TR/CSS21/visudet.html#Computing_heights_and_margins”]“Calculating heights and margins” above.
  2. If this tentative height is greater than ‘max-height’, the rules [URL=“http://www.w3.org/TR/CSS21/visudet.html#Computing_heights_and_margins”]above are applied again, but this time using the value of [URL=“http://www.w3.org/TR/CSS21/visudet.html#propdef-max-height”]‘max-height’ as the computed value for [URL=“http://www.w3.org/TR/CSS21/visudet.html#propdef-height”]‘height’.
  3. If the resulting height is smaller than ‘min-height’, the rules [URL=“http://www.w3.org/TR/CSS21/visudet.html#Computing_heights_and_margins”]above are applied again, but this time using the value of [URL=“http://www.w3.org/TR/CSS21/visudet.html#propdef-min-height”]‘min-height’ as the computed value for [URL=“http://www.w3.org/TR/CSS21/visudet.html#propdef-height”]‘height’.

There’s more info in the “ultimate Reference”.

Paul…

Thank you for the info, I think am clear on it now. tho no less disapointed that, essentially one cannot have nested 100% “adjusting” divs without resorting to some image trick… but, oh well.

BTW the CSS reference / Articles are very well witten and informative… :slight_smile: