Welcome to WebmasterWorld Guest from 54.163.35.238

Forum Moderators: not2easy

Message Too Old, No Replies

CSS height question...

     

madcat

10:29 pm on Aug 29, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

1:49 am on Aug 30, 2002 (gmt 0)

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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

2:18 am on Aug 30, 2002 (gmt 0)

10+ Year Member



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

6:41 am on Aug 30, 2002 (gmt 0)

10+ Year Member



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

2:59 pm on Aug 30, 2002 (gmt 0)

10+ Year Member



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

5:37 pm on Aug 30, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

5:48 pm on Aug 30, 2002 (gmt 0)

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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

8:04 pm on Aug 30, 2002 (gmt 0)

10+ Year Member



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

11:57 pm on Aug 30, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ahhh well...

The benefits are far greater than the drawbacks.

rewboss

5:16 pm on Aug 31, 2002 (gmt 0)

10+ Year Member



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

1:12 pm on Sep 1, 2002 (gmt 0)

10+ Year Member



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

2:59 pm on Sep 1, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

Featured Threads

Hot Threads This Week

Hot Threads This Month