Div Height in Percentage [duplicate]

Question

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.

Answer 1

It doesn't take the 50% of the whole page is because the "whole page" is only how tall your contents are. Change the enclosing html and body to 100% height and it will work.

html, body{     height: 100%; } div{     height: 50%; } 

http://jsfiddle.net/DerekL/5YukJ/1/

^ Your document is only 20px high. 50% of 20px is 10px, and it is not what you expected.

^ Now if you change the height of the document to the height of the whole page (150px), 50% of 150px is 75px, then it will work.

Answer 2

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/