Basic height percentage

Question

I don\'t understand how height percentages work.

Why is the following snippet not filled with color?

Answer 1

You have to set the html's height as well.

html,
body {
  height: 100%;
  margin: 0;
}
#div1 {
  height: 20%;
  background-color: red;
}
#div2 {
  height: 80%;
  background-color: blue;
}