Topic: Blasted 100% height issues... $Pages that link to <a href="https://ozoneasylum.com/backlink?for=11011" title="Pages that link to Topic: Blasted 100% height issues..." rel="nofollow" >Topic: Blasted 100% height issues...\$

Author	Thread
synax Maniac (V) Inmate From: Cell 666 Insane since: Mar 2002	posted 07-16-2003 04:07 Here's my deal: I want a page that has a 10px border all around with a container box inside, and inside that is all my actual content. I want the container box to always fill up the entire browser, leaving the 10px border, but I can'f figure out how to get this working yet. Right now I'm getting a vertical scroll bar... Here's the CSS code: code: body { background-color: #676767; margin: 0; padding: 10px; height: 100%; } #contain { background-color: #9eb5c2; border: 1px solid #000; height: 100%; } Any takers? [This message has been edited by synax (edited 07-16-2003).]
ozphactor Maniac (V) Inmate From: California Insane since: Jul 2003	posted 07-16-2003 04:12 Ah! I take it you misunderstand the CSS box model. I'm too lazy to explain myself, so I'll just direct you to and excellent explanation by Slime in a previous thread. It's the second post down: http://www.ozoneasylum.com/Forum8/HTML/000614.html
synax Maniac (V) Inmate From: Cell 666 Insane since: Mar 2002	posted 07-16-2003 04:28 Actually I'm aware of the box-model problems in IE, but it's a bit harder to apply a fix to my problem since it's using percentages and not percise measurements. [This message has been edited by synax (edited 07-16-2003).]
ozphactor Maniac (V) Inmate From: California Insane since: Jul 2003	posted 07-16-2003 05:56 Hmm.... A few things to note: 1. You have a margin [edit: i mean padding] on the page. 100% means 100% of the "viewport" window and the margins add to the height of the page, and that's why you have the scrollbar. 2. You have a border on the div. The CSS "box model" states that borders (and padding) be ADDED ON TO the div width and height. Therefore, the size of the div is actually (100% + 2 pixels). 3. Your 100% height declaration only works in IE. I don't know why but it's not showing up in Netscape/Mozilla/Firebird. It's only about 30px high in those browsers. Just thought you might wanna know. Are you sure you understand the box model? I wasn't speaking about IE5's problems with it, I was speaking of your understanding of it, that padding and borders add to the dimensions and are not part of it. And yes, IE5 gets it wrong and puts it inside. EDIT: Oooh, solved the problem in Netscape/Moz/FB.. Just add this code: html { height: 100%; } For some reason, the Gecko rendering engine requires that even the <html> container's height to be set. [This message has been edited by ozphactor (edited 07-16-2003).] [This message has been edited by ozphactor (edited 07-16-2003).]
synax Maniac (V) Inmate From: Cell 666 Insane since: Mar 2002	posted 07-16-2003 16:49 quote: Actually I'm aware of the box-model problems in IE, but it's a bit harder to apply a fix to my problem since it's using percentages and not percise measurements. There's no way to add or subtract pixels from percentages. Thanks for the Mozilla fix, btw. I wasn't even aware of the problem. [This message has been edited by synax (edited 07-16-2003).]
synax Maniac (V) Inmate From: Cell 666 Insane since: Mar 2002	posted 07-16-2003 18:03 Ok, I've found some interesting information. If your document is in Quirks mode (that is, you remove the DOCTYPE) the following will work (in IE, it won't work in Mozilla): code: /* Mozilla fix */ html {height: 100%;} body { background-color: #676767; margin: 0; padding: 10px; height: 100%; } #contain { background-color: #9eb5c2; border: 1px solid #000; height: 100%; } However, I want my page to validate, so I'm trying some other stuff now.
ozphactor Maniac (V) Inmate From: California Insane since: Jul 2003	posted 07-16-2003 19:07 removing the doctype throws IE6 into "quirks mode", and makes is behave like IE5 once did... I recommend you stick with the doctype and experiment some more, before you give in ;-) Edit: You could try setting the box to something like 99%, to compensate for the borders, but at low resolutions, you might still get a scrollbar. This isn't really a solution, just a fudge. [This message has been edited by ozphactor (edited 07-16-2003).]
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 07-16-2003 19:47 So set your border as a % value as well - Play around of course, but a 1% or .5% border oughta work ok.
ozphactor Maniac (V) Inmate From: California Insane since: Jul 2003	posted 07-17-2003 00:02 Setting borders in percentages would work, but I personally never use anything but pixels for borders. Sometimes you just have to have it 1px wide: no more, no less. A compromise would be to set the top and bottom body padding in percentages. Maybe set 5% top and bottom padding, and then an 88% height div with a 1px border. Might not turn out quite the way you wanted, but at least it's close.
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 07-17-2003 00:53 Yeah, when you're talking things that need to be 1px, sure. But since he's looking for 10px as it is, a % value would most likely be suitable - especially since it's on the outer edge of the body.
synax Maniac (V) Inmate From: Cell 666 Insane since: Mar 2002	posted 07-25-2003 18:43 Just to let everyone know, I've given up on the border. I tried a slew of different methods (CSS and not) and nothing wanted to work properly. I love CSS, but it still needs some work if people expect to replace most HTML with it.
HZR Bipolar (III) Inmate From: Cold Sweden Insane since: Jul 2002	posted 07-25-2003 19:23 quote: For some reason, the Gecko rendering engine requires that even the <html> container's height to be set. Mozilla has the right behavior, since body { height: 100%; } means 100% of the parent elements height, and the html elements height is auto.
ozphactor Maniac (V) Inmate From: California Insane since: Jul 2003	posted 07-25-2003 21:16 Yeah, you're right. It's easy to forget such things when working with IE. Thanks for clearing that up, HZR.

Topic: Blasted 100% height issues...\$

Author

Thread

synax
Maniac (V) Inmate

From: Cell 666
Insane since: Mar 2002

posted 07-16-2003 04:07

Here's my deal: I want a page that has a 10px border all around with a container box inside, and inside that is all my actual content.
I want the container box to always fill up the entire browser, leaving the 10px border, but I can'f figure out how to get this working yet. Right now I'm getting a vertical scroll bar...

Here's the CSS code:

code:

body {

	background-color: #676767;

	margin: 0;

	padding: 10px;

	height: 100%;

}



#contain {

	background-color: #9eb5c2;

	border: 1px solid #000;

	height: 100%;

}

Any takers?

[This message has been edited by synax (edited 07-16-2003).]

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

posted 07-16-2003 04:12

Ah!

I take it you misunderstand the CSS box model.

I'm too lazy to explain myself, so I'll just direct you to and excellent explanation by Slime in a previous thread.

It's the second post down: http://www.ozoneasylum.com/Forum8/HTML/000614.html

synax
Maniac (V) Inmate

From: Cell 666
Insane since: Mar 2002

posted 07-16-2003 04:28

Actually I'm aware of the box-model problems in IE, but it's a bit harder to apply a fix to my problem since it's using percentages and not percise measurements.

[This message has been edited by synax (edited 07-16-2003).]

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

posted 07-16-2003 05:56

Hmm....

A few things to note:

1. You have a margin [edit: i mean padding] on the page. 100% means 100% of the "viewport" window and the margins add to the height of the page, and that's why you have the scrollbar.

2. You have a border on the div. The CSS "box model" states that borders (and padding) be ADDED ON TO the div width and height. Therefore, the size of the div is actually (100% + 2 pixels).

3. Your 100% height declaration only works in IE. I don't know why but it's not showing up in Netscape/Mozilla/Firebird. It's only about 30px high in those browsers. Just thought you might wanna know.

Are you sure you understand the box model? I wasn't speaking about IE5's problems with it, I was speaking of your understanding of it, that padding and borders add to the dimensions and are not part of it. And yes, IE5 gets it wrong and puts it inside.

EDIT: Oooh, solved the problem in Netscape/Moz/FB.. Just add this code:

html { height: 100%; }

For some reason, the Gecko rendering engine requires that even the <html> container's height to be set.

[This message has been edited by ozphactor (edited 07-16-2003).]

[This message has been edited by ozphactor (edited 07-16-2003).]

synax
Maniac (V) Inmate

From: Cell 666
Insane since: Mar 2002

posted 07-16-2003 16:49

quote:
Actually I'm aware of the box-model problems in IE, but it's a bit harder to apply a fix to my problem since it's using percentages and not percise measurements.

There's no way to add or subtract pixels from percentages. Thanks for the Mozilla fix, btw. I wasn't even aware of the problem.

[This message has been edited by synax (edited 07-16-2003).]

synax
Maniac (V) Inmate

From: Cell 666
Insane since: Mar 2002

posted 07-16-2003 18:03

Ok, I've found some interesting information. If your document is in Quirks mode (that is, you remove the DOCTYPE) the following will work (in IE, it won't work in Mozilla):

code:

/* Mozilla fix */

html {height: 100%;}



body {

	background-color: #676767;

	margin: 0;

	padding: 10px;

	height: 100%;

}



#contain {

	background-color: #9eb5c2;

	border: 1px solid #000;

	height: 100%;

}

However, I want my page to validate, so I'm trying some other stuff now.

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

posted 07-16-2003 19:07

removing the doctype throws IE6 into "quirks mode", and makes is behave like IE5 once did...

I recommend you stick with the doctype and experiment some more, before you give in ;-)

Edit: You *could* try setting the box to something like 99%, to compensate for the borders, but at low resolutions, you might still get a scrollbar. This isn't really a solution, just a fudge.

[This message has been edited by ozphactor (edited 07-16-2003).]

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 07-16-2003 19:47

So set your border as a % value as well - Play around of course, but a 1% or .5% border oughta work ok.

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

posted 07-17-2003 00:02

Setting borders in percentages would work, but I personally never use anything but pixels for borders. Sometimes you just have to have it 1px wide: no more, no less.

A compromise would be to set the top and bottom body padding in percentages.

Maybe set 5% top and bottom padding, and then an 88% height div with a 1px border.

Might not turn out quite the way you wanted, but at least it's close.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 07-17-2003 00:53

Yeah, when you're talking things that need to be 1px, sure.

But since he's looking for 10px as it is, a % value would most likely be suitable - especially since it's on the outer edge of the body.

synax
Maniac (V) Inmate

From: Cell 666
Insane since: Mar 2002

posted 07-25-2003 18:43

Just to let everyone know, I've given up on the border. I tried a slew of different methods (CSS and not) and nothing wanted to work properly.

I love CSS, but it still needs some work if people expect to replace most HTML with it.

HZR
Bipolar (III) Inmate

From: Cold Sweden
Insane since: Jul 2002

posted 07-25-2003 19:23

quote:
For some reason, the Gecko rendering engine requires that even the <html> container's height to be set.

Mozilla has the right behavior, since body { height: 100%; } means 100% of the parent elements height, and the html elements height is auto.

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

posted 07-25-2003 21:16

Yeah, you're right. It's easy to forget such things when working with IE. Thanks for clearing that up, HZR.

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Blasted 100% height issues...

Insert Slimies »

Insert UBB Code »

Topic: Blasted 100% height issues... $Pages that link to <a href="https://ozoneasylum.com/backlink?for=11011" title="Pages that link to Topic: Blasted 100% height issues..." rel="nofollow" >Topic: Blasted 100% height issues...\$