2 replies [Last post]
spaniol
Offline
newbie
Last seen: 10 years 32 weeks ago
Timezone: GMT-3
Joined: 2009-01-21
Posts: 5
Points: 2

Is it? Is it possible to expand a blocky kind of element to 100% of its container? whether this container be a div or the body itself, etc?

It would make things SO much easy for me when creating layouts.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Have you searched the forum

Have you searched the forum archives? There - in 6 years - is a wealth of information and posts on the subject, including some stuff in the 'How To' section.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 40 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Height

http://www.w3.org/TR/CSS21/visudet.html#the-height-property

Quote:

<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block.

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

What they don't say:
"Explicitly" is also w3c-ese for "not a percentage". So any other unit used to state the height of a parent will allow 100% height child boxes.

I don't know why the page only says "depends on content height". So I had to learn the hard way:

Doesn't work:
parent {
height: 60%;
}
child {
height: 100%;
}

child's height = auto

Does work:
parent {
height: 60em;
}
child {
height: 100%;
}
Browser knows what 100% of 60em is.

That's all that w3c page needs is a simple example like that and the little multicultural children would hold hands and sing KumBaYa.

: (

I also don't see why a few stickies with provocative names can't sit in the Beginners CSS section, who are actually links to the How To's in the How To section. By provocative names I mean "100% height", "Float: center" and "Page won't center in FF!".

I'm no expert, but I fake one on teh Internets