Welcome to WebmasterWorld Guest from 34.204.176.189

Forum Moderators: not2easy

Message Too Old, No Replies

CSS height question...

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 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?

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

Senior Member

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

joined:Apr 25, 2002
posts:8637
votes: 283


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

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

New User

10+ Year Member

joined:Aug 30, 2002
posts:5
votes: 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.
6:41 am on Aug 30, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:June 7, 2002
posts:475
votes: 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...

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

New User

10+ Year Member

joined:Aug 30, 2002
posts:5
votes: 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.

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 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.

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

Senior Member

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

joined:Apr 25, 2002
posts:8637
votes: 283


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

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

Preferred Member

10+ Year Member

joined:June 7, 2002
posts:475
votes: 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.

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


Ahhh well...

The benefits are far greater than the drawbacks.

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

Preferred Member

10+ Year Member

joined:June 7, 2002
posts:475
votes: 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.
1:12 pm on Sept 1, 2002 (gmt 0)

New User

10+ Year Member

joined:May 8, 2002
posts:13
votes: 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?
2:59 pm on Sept 1, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 15, 2002
posts:971
votes: 0


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members