CSS height question...

[madcat]

When you apply a value of 100% to the body element or any column <div>s that you might have...what exactly does the browser use to render what it thinks is 100%?

I have three columns, the body and <div> elements height values are 100%, but two columns stop mid-page while the third column filled with content continues on. Shouldn't the <div>s continue until the page stops or no?

[ergophobe]

I was playing with this recently on IE, Opera, Moz etc. I forget which was which, but at least on browser clearly takes it to mean screen height, so results are bad if the column is more than one screenful. Another wouldn't even use the whole screen, but extended just to the bottom of any text content.

I don't think any gave the result I (and I think you) wanted - all the way down to the bottom of the longest column or a full screen, whichever comes last.

Tom

[lipskin]

When using percentages in CSS I believe it is the percentage of the width that is used. So if the body width is, for example, 720px, then a height of 50% would be 360px.

[rewboss]

height is calculated according to the height of the containing element (lipskin is mistaken). If the containing element is the document itself, a standards-compliant browser will use the viewport as the "containing element" -- if you have to scroll up, an element with height:100% will end at the bottom of the first screen, so content will "spill out" below it. It also means that if you specify overflow:hidden this will have the effect of turning off scrollbars.

IE5.x and IE6 in quirks mode behave differently -- of course...

[lipskin]

rewboss,

Yes, you're right. I just checked the specs and it seems as though the information I found elsewhere was wrong. Thanks for clearing that up.

[madcat]

If the containing element is the document itself, a standards-compliant browser will use the viewport as the "containing element"

Doh!

-->Good information though, thank you.

[ergophobe]

height is calculated according to the height of the containing element (lipskin is mistaken). If the containing element is the document itself, a standards-compliant browser will use the viewport as the "containing element"

Standards-compliant being the operative phrase.

If the containing element is, say, body, and one column is 2000px long and one is 20px (based on content), that should make the body 2000px long shouldn't it? Then if you declare col 2 to have a height of 100%, it should be as long as the body, which should be as long as the longest column.

I think one browser I tested gave more or less that result. Others sized to the viewport or just to the content in the shorter column.

Tom

[rewboss]

If the containing element is, say, body, and one column is 2000px long and one is 20px (based on content), that should make the body 2000px long shouldn't it?

You wish. Well, that works until you specify a height for the body element -- then the browser is supposed to use the viewport as a reference. CSS can be bizarre -- elements can contain elements larger than themselves. You then use CSS to tell the browser what to do with the overflow -- let it "spill out" of its container, hide it or supply scrollbars. The default is to let it overflow, but when the containing element is the viewport itself, it has to include scrollbars as well... and this is the easy stuff.

[madcat]

Ahhh well...

The benefits are far greater than the drawbacks.

[rewboss]

It's not a drawback so much as a rather confusing, but logical, consequence of the technology. It just needs some getting used to.

[antidote]

Height 100%... frustrating, isn't it? Mozilla will render it correctly according to the standards - 100% of the window. However, IE ignores a height percentage completely and only makes the division as high as the contained text UNLESS you remove the doctype. Interesting, eh? An oversight on IE's part?

[madcat]

Well I say drawback because you can achieve the effect I'm looking for with tables.