If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

css1: <div style="height: 100%"> does not work.




CSS Parsing and Computation
17 years ago
4 years ago


(Reporter: Håvard Wall, Assigned: Pierre Saslawsky)



Firefox Tracking Flags

(Not tracked)





17 years ago

Seems like the css1 attribute 'height' have no effect. Using the following code
I wanted to create a left bound menu. The 'height' property should ensure that
all text on the right side should be aligned with the right margin on the menu.
Even when the menu text is done.
<div style="float: left; width: auto; height: 100%;">
See the difference in MSExplorer 5.5.



My build id is all zeros(?). I downloaded and build it 06.16.2001 using cvs. I
found this string using "about mozilla": Mozilla/5.0 (X11; U; Linux i686; en-US;
rv:0.9.1+) Gecko/20010617


Please send me an email for further explanation. (No, I've never done this

Comment 1

17 years ago
Actually I don't think that's the correct way to do what you're trying.  IE
seems to be pulling its height from the window size instead of the container
size (resize your window to see what I mean).  Mozilla is probably pulling the
height from the div itself (which would render height:100% useless) so I don't
know what the correct procedure is.  But this is CSS2 and it says it should come
from the containing block.  The question is, what is the containing block, the
div itself or the entire body.. or even the window like IE does?

CCing somebody who knows; hope he doesn't mind.

Comment 2

17 years ago
The way I see it I'm setting style properties of the <div> block which is
contained in the <body> block. I totally agree that IE use the window as
containing block which is completely... stupid. But in this case it was a bit
closer to the rendering I believe is correct. That the <div> block should be
contained in itself seems a bit odd to me, but I guess its more consistent than
using the window...
We should be using the <body> as the container of the <div>.  That seems to not
be happening.  I'm not sure what the right thing is to do here.  Adding qawanted
keyword and ccing waterson who's been working on float stuff.
Keywords: qawanted

Comment 4

17 years ago
"IE seems to be pulling its height from the window size instead of the container
size (resize your window to see what I mean)."

IE 5.0 Win98 seems to initialize its height from between <h1> and <h2>, and
resizes as the window is resize. When I switch IE to full screen mode its height
starts from <h1> to the bottom of the page.

Opera 5.11 Win98 seems to get the height from the top of <p> containing "Here I
put some verbose text describing ..." to the bottom of <p> containing "First
section:", and is also affected by window resizing. When Opera is switched to
full screen mode, it stretches to bottom of <h2>.

Anyone using MacIE5?

Per the CSS spec, percentage heights should be treated as 'auto' if the 
containing block (in this case <html>) doesn't have a fixed height (which it
doesn't, since it has the initial height of 'auto').


Have a look at the three alternate stylesheets (select View|Use Stylesheet from
the menus) on the following page:
Last Resolved: 17 years ago
Keywords: qawanted
QA Contact: ian → bzbarsky
Resolution: --- → INVALID
Right you are, Ian.  From
http://www.w3.org/TR/REC-CSS2/visudet.html#the-height-property :

    Specifies a percentage height. The percentage is calculated with respect to
    the height of the generated box's containing block. If the height of the
    containing block is not specified explicitly (i.e., it depends on content
    height), the value is interpreted like 'auto'.

verifying invalid.
Duplicate of this bug: 462355
You need to log in before you can comment on or make changes to this bug.