Div Height in Percentage

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    lt div class  container  gt    adsf  lt  div gt    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

User · Answer

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

User · Answer

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    lt div id  wrapper  gt     lt div class  container  gt     adsf    lt  div gt   lt  div gt    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

User · Answer

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

[css] Div Height in Percentage

Examples related to css

Examples related to html

Examples related to percentage

Examples related to jsfiddle