height: 100%; ????

Hi.

At times to make sure an element stretches all the across the element it is enclosed in I put in the css

css sheet
.box {
width: 100%;
}

HTML sheet
<div class="box">

And that will make sure that the element with the class="box" will stretch all the way across the element it is incased in.

However, why doesn't this work?

css sheet
.box {
height: 100%;
}

HTML sheet
<div class="box">

Is there something I can do to get the same effect?

God bless.
In Christ Jesus, Karl.

 

1) if .box is a div, width:100% is redundant since div's automatically do that unless you float them.

2) percentage widths and heights on elements are ignored if the PARENT element does not have either positioining (relative or absolute) or a FIXED measurement size on the same axis.

For example:

<div class="box1"><div class="box2">Test</div></div>

.box1 {
height:auto;
}

.box2 {
height:100%;
}

height will be ignored. This is why the 'height:1%' holly hack for haslayout works. If we set that to

.box1 {
height:100px;
}

.box2 {
height:100%;
}

then .box2 will come to 100px because it's parent has an explicit height on it.

By the specification the only exception to that rule is BODY, though some browsers treat HTML as an element above BODY (which is technically incorrect!)... So if you want 100% on a div in relationship to the page body, that would be:

html, body { height:100%; }

Just be warned that if your content is longer than that height, your wrapper will NOT stretch to fit in standards compliant browsers, which is why when that is used in most layouts coders use min-height and not height.

In general, declaring a fixed height on anything containing text that could change width or text size (aka content) is a bad idea and made of /FAIL/.

Though I'd have to see exactly what it is you are trying to accomplish to say whether or not you are going down the wrong path or not... Heading with a fixed image, probably ok, flow content of multiple paragraphs of text, miserable /FAIL/.

 

Thanks Deathshadow.
Looks like my problem was trying to use it in a float. Wish I knew the half what you guys knew!
I also I have had allot of issues with trying to move to CSS table layouts and the display: ***; and position: ***; elements/tags or whatever you call them in the css sheet. Feel like going back to 'floats n hacks' but that will be another thread. I'd hoped CSS Table Layouts where going to resolve all my layout issues with all browsers but IE 6-7 but it doesn't seem so, lots of strange things happening!

God bless.
In Christ Jesus, Karl.