How to set height in percent using css

To use measures relative to the displayed area, use vw and vh .

See that the example in yellow is relative to the frame area ( viewport width and viewport height ).

Click full page in the corner of the snippet and compare.

If you use percentage, the element is relative to the top div, as long as the position of the top and the top is not fixed or absolute (the internal can even have an absolute position). It is the example in red, 80% of the height of the yellow div, and half of the width.

#d1 {
  background:yellow;
  width:50vw;
  height:80vh;
}

#d2 {
  background:red;
  height:80%;
  width:50%;
}

<div id="d1">
  <div id="d2">
  </div>
</div>

For a comparison of several CSS units of measure, see these posts:

  

Why is it recommended to use drive "em" instead of "px" for fonts?

  

What are the differences between font sizes units "vw", "in" and "%"?