225823 - CSS: height from div is ignored

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Carsten Otto]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.4) Gecko/20030807
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.4) Gecko/20030807

Hello!
The sample site uses

div#menu {
  height: 100%;
}

and

<div id="menu">

Mozilla does not get this 100%. Either it does not know what CSS-IDs mean, or it
does not know height at all.
The result is a page, that displays a blue menu. This menu should reach from the
top to the bottom (height:100%), but it is very "small", because only one text
line is inside (in this example).
www.w3.org and their validators do not find an error. Additionally Microsoft
Internet Explorer (Windows, not Mac!) displays the site correctly, screenshot:
http://c-otto.de/mozillacss/ie.jpg

I am unable to give further information, because my CSS-knowledge is very
limited. Because of this reason I provide the whole and original CSS, although a
smaller part may be enough.

Reproducible: Always

Steps to Reproduce:
Load the website

Actual Results:  
Coloured DIV ends at the bottom of the text

Expected Results:  
Coloured DIV should fill the whole screen (with a fixed width)

Comment 1

[Carsten Otto]

I found out it has nothing to do with the CSS-IDs, mozilla has problems with
<div style="height:100%"> too.

Comment 2

[Anne (:annevk)]

try adding:

html,body{height:100%;} or html,body{height:auto;} (not sure what is correct)

The bug is invalid. That is for sure.

Comment 3

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

Agreed.  See http://www.w3.org/TR/CSS21/visudet.html#the-height-property , which
says:

If the height of the containing block is not specified explicitly (i.e., it
depends on content height), and this element is not absolutely positioned, the
value is interpreted like 'auto'.