100% height and DIV overflow

I've been pointed to this list as the most appropriate list for my
question.  The question regards an area of CSS where there might be a
discrepancy between how an "average joe developer" interprets what is
supposed to happen and what the standard might specify (assuming that
the standard is not intentionally leaving things open for interpretation
by browser developers).  I apologize in advance for inaccuracies in my
explanation, I am one of many average joes that interpreted the intended
CSS behavior as I describe.


- Several elements are nested, including nested tables and ending at a
- All elements in the direct line to the DIV have height=100%.  The
intent is to have elements that are fixed at top, bottom, and left of
the browser window (like frames would have done), and let the DIV take
the remaining space.
- The DIV uses "width: 100%" "height: 100%" and "overflow: auto" to use
all such space and no more.


- From a common sense perspective the above should work (maybe not from
the standard's perspective).  It even works in IE.
- In practice, it does not work in all browsers.  It was brought to my
attention that the reason is that IE works when using quirks mode
(interestingly, quirks mode is something that most developers don't know
about, and most books, guides and references mention it, but rarely in a
prominent location).
- In standard compliant mode (and quirk mode for some browsers like
Mozilla), this behavior does not work.  The DIV will expand as desired
when the content is too small, but overflow:auto and overflow:scroll
fail to limit the height to parent space when such parent space was
reached via nested 100% height.
- An example page (div.html) can be found at:
- The example page runs as intended in IE, and shows the unintended
behavior if run in Mozilla as-is or in IE if modified by adding the
DOCTYPE that enforces standard compliance.


1) The letter of the spec seems to be interpreted by browser-writers in
the same way.  But the behavior exhibited by IE seems to be the way most
non-experts interpret what should be happening.  Is the letter of the
spec exactly what was intended?

2) If, as I fear, the answer to 1 is yes, is there any other way
supported by the standard to achieve the creation of a complex page with
a nested 100% scrolling DIV, so that you can keep a copyright (or other)
line always visible at the bottom of the browser window without using
frames?  I really hate having to tell my customers that they can *only*
use IE.

Bruno Melloni
Director of Software Architecture
Akuratus Corporation
1333 N. Stemmons Fwy, Suite 110
Dallas, Texas 75207
Phone: 469.227.0920
Fax: 469.227.0967

Received on Friday, 2 September 2005 14:29:01 UTC