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

For example:

HTML:

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

CSS:

.container
{
  width:80%;
  height:50%;
  background-color:#eee;
}

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.

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

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.