homepage Welcome to WebmasterWorld Guest from 54.197.94.241
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS height question...
madcat




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

Ahhh well...

The benefits are far greater than the drawbacks.

rewboss




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

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved