100% height and Overflow

[phb5000]

Hi,

I wish to have a "content area" that has a height of 100% and that has overflow: auto (so that its scrolls). However, I cannot seem to get this to work!

What I've tried is to add a div with styles of height 100% and overflow auto/scroll. However, when the div's content actually spills over its height of 100% (of its parent) the div just expands instead of adding scrolling!

• How can I stop this from happening?
• How can I make sure that the Div's height remains at the height of its parent container?
• Can the problem have something to do with the fact that the div is in a table?
• Are there any other ways of making a content area that has a 100% height and scrolls, without using a div?

[mwinter]

I wish to have a "content area" that has a height of 100% and that has overflow: auto (so that its scrolls). However, I cannot seem to get this to work!

Such schemes can introduce usability problems so not implementing it isn't necessarily a bad thing. It can also fail to work in some browsers even if implemented correctly so be sure it fails gracefully.

What I've tried is to add a div with styles of height 100% and overflow auto/scroll. However, when the div's content actually spills over its height of 100% (of its parent) the div just expands instead of adding scrolling!

That's because percentage heights are ignored if the containing block (typically the parent element) doesn't have an explicit height set. This is recursive, so

<div style="height: 100%;">
    <div style="height: 100%;"></div>
</div>

wouldn't work because the outer element doesn't have a parent with an explicitly assigned height. The only exception is with the html element which uses the dimensions of the viewport.

1. How can I stop this from happening?
2. How can I make sure that the Div's height remains at the height of its parent container?

Hopefully these are now answered.

3. Can the problem have something to do with the fact that the div is in a table?

Not really, though the table is almost certainly a presentational feature and should be replaced by semantic markup.

4. Are there any other ways of making a content area that has a 100% height and scrolls, without using a div?

Any element rendered in a block-level context will do, but a div element is probably the most appropriate as it's likely that you're looking for a generic container to hold other elements.

Mike