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