[BNM] Making contents 100% of a containing element with no explicit height set

[Jon Bedworth]

Hello BNM

I am coming across a problem which is arising from converting an IE-specific
web application to a more cross-browser standards-compliant one. I have in
the course of this work included DOCTYPE headers, as recommended by W3C and
others as a 'good thing', but I have run into the classic 100% height issue
that seems on the face of it to be a failing in these standards.

Basically, I want to do something really simple - I want to size some
contents to be 100% height of a containing element that has no specific
height setting (implicity height : auto). The specific issue relates to a
table, which fills the whole available browser window, and which has 3 rows,
two of which have a fixed height, the third of which is simply what remains
and can be variable, depending on the size of the browser window. The
variable one is the first row.

A very common situation, which the use of DOCTYPE seems to break in some
browsers (notably Firefox) which stubbornly refuse to fill the space. It
seems that now, in order to make sure the contents size properly to this
first row, one has to explicitly set a height, even though really its
impossible to tell. So, I though, well surely this 'standard' must allow for
this situation, so I tried 100% - i.e. use 100% of the space left. This
worked in firefox, but in Opera and IE it meant that now the first row
filled the whole window and the other two were pushed below it. As the
following discussion of browser 'quirks mode' says:

*Percentage heights* for elements (e.g., <table height="100%"> in HTML or table
{ height: 100% } in CSS) are applied, using the available height as
reference, even when the enclosing block has height auto (the default). In
Standards Mode, the height is determined by the require­ments of the
content; but percentage heights work when the enclosing block has its height
set to a specific value.

http://www.cs.tut.fi/~jkorpela/quirks-mode.html

So, how on earth can I size some contents to a container with no height set,
which works consistently across browsers in standards mode, and without
using Javascript to calculate it?

Ironically, the only consistent behaviour I get from all browsers is when I
DO NOT use a DOCTYPE. Then, they all properly size the contents to be 100%
of this variably sized row. Also, these problems do not occur for widths,
which seems completely inconsistent. So much for standards!

I'd really be interested if anyone on this list has developed a work around
for what must be a very common problem.

Thanks