Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

====== CSS - Height - DIV height in percentage ======

When you change height from % to px it works perfectly, but when using % is does not work.

For example:

HTML:

<code html>
<div class="container">
  This is a test
</div>
</code>

CSS:

<code css>
.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}
</code>

----

===== Solution =====

The percentage of your div is connected to the div that contains it.

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.

Change the enclosing html and body to 100% height and it will work.

<code html>
html, body{
  height: 100%;
}

div{
  height: 50%;
}
</code>

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.