Not enough height

[esingley]

I'm embarking on my first pure CSS redesign, so apologies if this is
something obvious. On this page:

http://www.singley.org/test/test_bg.html

In Firefox, the text runs down past the end of the main container.
Works fine in IE 6.

On http://www.quirksmode.org/css/100percheight.html, I did read this:
"For instance, if you want to make an element as high as the entire
page (whatever this height may be) you're out of luck." Which seems
crazy. It works fine in IE, so I figure there must be a way to get the
container, with content, to push it down to very bottom on the page in
Firefox as well.

Ideas?

Thanks!

[kchayka]

es******@gmail.com wrote:

http://www.singley.org/test/test_bg.html

In Firefox, the text runs down past the end of the main container.
Works fine in IE 6.

No, IE is broken.

More specifically, IE's default overflow behavior is broken. The subject
has come up often enough, you'll probably find your own answer to this
if you check the groups.google.com archives.

BTW, if you set no height at all, everything should adjust fine all by
itself.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Gus Richter]

es******@gmail.com wrote:

I'm embarking on my first pure CSS redesign, so apologies if this is
something obvious. On this page:

http://www.singley.org/test/test_bg.html

In Firefox, the text runs down past the end of the main container.
Works fine in IE 6.

On http://www.quirksmode.org/css/100percheight.html, I did read this:
"For instance, if you want to make an element as high as the entire
page (whatever this height may be) you're out of luck." Which seems
crazy. It works fine in IE, so I figure there must be a way to get the
container, with content, to push it down to very bottom on the page in
Firefox as well.

If 100% is applied to div, body and html, the div height of 100% is
taken from body, which takes it from html, which is 100% of the
viewport. (IE gets this wrong.)
If at least one of them does not specify a percentage, the div height
will be its content.

--
Gus

[Eric Lindsay]

In article <3u*************@individual.net>, kchayka <us****@c-net.us>
wrote:

es******@gmail.com wrote:

http://www.singley.org/test/test_bg.html

In Firefox, the text runs down past the end of the main container.
Works fine in IE 6.

No, IE is broken.

More specifically, IE's default overflow behavior is broken. The subject
has come up often enough, you'll probably find your own answer to this
if you check the groups.google.com archives.

BTW, if you set no height at all, everything should adjust fine all by
itself.

I found that in Safari. If the heights are all removed it works fine,
and the page gets large enough to cope with the content (or the whole
page gets a scroll bar).

However in the original test page Safari acts as if you have set
main_container overflow: visible; so the text overflows the available
space whereas it sound like IE acts as if it defaults to overflow:
hidden ?

However what is the correct way to get around this if you did happen to
want to include a height? In Safari using overflow: auto or overflow:
scroll makes a scroll bar for the remaining content in main_container if
used in the original test page. I wonder if IE obeys this?

--
http://www.ericlindsay.com

[esingley]

OK, but this solution is not ideal. If I remove the height: 100% from
the html, body and div, it works fine *for pages with content that goes
to the bottom of the page.* Some pages on my site will do this.
Others will not. For those that do not, the main-container will only
go as far as the content. So, what I need is this: a container that
will stretch to 100% of the height of its content, but will also
stretch to 100% of the viewport even if the content does not.

I searched the archives and didn't find a suitable answer to this
problem. Is there a good answer?

Thanks!