Posted by bluparadox on 09/27/05 11:18

Unfortunately height: 100%; probably wont do what he wants it to in
anything but internet explorer because of how the standard is defined
for content that is larger than the specified size.

If the content takes more space than is aloted then the "overflow"
property becomes important. The 4 allowed values are "hidden",
"visible", "scroll", and "auto". "hidden" completely hides content that
falls outside of the container, "visible" lets the content continue to
go outside the container. "scroll" puts in scrollbars to allow all the
content to be viewed in the container, and I beleive "auto" puts the
scrollbars in only when neccessary.

The important thing to notice is that according to the specification
none of those properties resize the container to fit the content, which
is what IE does when you specify height. The correct functionallity
(that is implemented by firefox) is to just let the content go off the
edge of the container (when overflow is "visible"), which which is what
is happening here. The functionality he wants is probably more like the
"min-height" property, but unfortunately IE doesnt support that, and
plenty of other browsers do not either. I believe you can make it work
with some css hacks, but it's sorta a pain.

the hacked code would look something like this (havent really tried
it):

#mainbody
{
min-height: 100%
}
* html #mainbody
{
height: 100%;
}

Basically this sets the min-height to 100% for all browsers that
support min-height, and for all versions of IE sets the height to 100%,
which IE treats as min-height. The reason the second statement only
affects only IE is the fact that IE is the only browser with an
invisible wrapper element that encloses html (another non-compliant...
feature). This wont work in all browsers, since browsers that do not
support min-height but are not IE will have height set as auto still,
but this is a reasonable default since the border should then expand
fit the content, but unfortunately will not also expand to fill the
screen if the content is smaller than the screen.

Hopefully that at least gets you started in the right direction

[Back to original message]