[css] Div Height in Percentage

Possible Duplicate:
Percentage Height HTML 5/CSS

This needs to be a simple one but I why the height specified in percentage for a div is not apply to it.

For example:

<div class="container">
  adsf
</div>

CSS:

.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

When I change height from % to px it works perfectly. % is as valid as px but why only px works and % not. here is the jsfiddle

Edit Though I missed the semicolon after 50% in original question which totally spoiled it. In fact what I intended to ask was why does the 50% does not make it consume the 50% of its container. It only takes its height from its content rather than 50% of its container.

There is the semicolon missing (;) after the "50%"

but you should also notice that the percentage of your div is connected to the div that contains it.

for instance:

<div id="wrapper">
  <div class="container">
   adsf
  </div>
</div>

#wrapper {
  height:100px;
}
.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

here the height of your .container will be 50px. it will be 50% of the 100px from the wrapper div.

if you have:

adsf

#wrapper {
  height:400px;
}
.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

then you .container will be 200px. 50% of the wrapper.

So you may want to look at the divs "wrapping" your ".container"...

You need to give the body and the html a height too. Otherwise, the body will only be as high as its contents (the single div), and 50% of that will be half the height of this div.

Updated fiddle: http://jsfiddle.net/j8bsS/5/