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:

<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.

Is this with quirks mode or standards mode? Heights work differently between modes. — Mr Lister, Jan 27 '13 at 07:54
@AliBassam I presume that is not the problem, since the OP says it works fine with px. — Mr Lister, Jan 27 '13 at 07:56
I know I missed the semicolon while changing the code but the question in fact 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. — ZedBee, Jan 27 '13 at 08:03
1. missing `;` after 50% 2. if you want to use percentage height you need to specify height of all parent block elements of div http://jsfiddle.net/j8bsS/8/ 3. this question is asked few times every month, voting for close — Peter, Jan 27 '13 at 09:37
Better explanation here http://stackoverflow.com/questions/1622027/percentage-height-html-5-css — Peter, Jan 27 '13 at 09:38

score 70 · Accepted Answer · edited Jun 30 '16 at 03:39

70

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/

enter image description here

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

enter image description here

^ 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.

edited Jun 30 '16 at 03:39

Nisse Engström

4,738
23
27
42

answered Jan 27 '13 at 08:03

Derek 朕會功夫

92,235
44
185
247

tnx @derek so we when specifying height for a div in %age we need to set its parent container's height set – ZedBee Jan 27 '13 at 08:10
@ZedBee - If you don't specify the height, then it will just take the height of the container's content. So yes you will have to specify the height. – Derek 朕會功夫 Jan 27 '13 at 08:12
tnx. That really made things clear – ZedBee Jan 27 '13 at 08:28
Downvote probably because this is not a correct answer. This is only accurate if the div element is a child of the body element. See duplicate question. – Jonas Äppelgran Sep 03 '13 at 09:46
@JonasÄppelgran - Disagree because `div` should be always in `body` according to the standards. – Derek 朕會功夫 Sep 03 '13 at 15:40
I mean this is only accurate if the div element is a DIRECT child of the body element. – Jonas Äppelgran Sep 04 '13 at 08:43
2

Yes it is because this is the answer to his specific jsfiddle, not a general answer. – Derek 朕會功夫 Sep 05 '13 at 15:50

Mr Lister · Answer 2 · 2015-08-02T12:03:15.223

3

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/

edited Aug 02 '15 at 12:03

answered Jan 27 '13 at 08:02

Mr Lister

45,515
15
108
150

score 1 · Answer 3 · answered Jan 27 '13 at 08:09

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"...

Div Height in Percentage

3 Answers3

Linked