2 replies [Last post]
Last seen: 13 years 7 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's picture
Last seen: 8 years 4 weeks ago
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
Last seen: 11 years 14 weeks ago
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378




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