Why does the DIV block treat height: 100% as the full height of the site?

Question

css

Link to JSFiddle
Essentially, what is the question.
I have a main div in which i have set

position: absolute;
  height: 100%;

Further, I threw other divs into it. And in the end, I decided to fill the empty space with a blue div.
I ordered him height: 100%, but why did he take it and go below the window ...
I thought it would be inherited and fill all the free space ... And he spoiled everything for me ...
I don’t feel the logic ... Please tell me where am I wrong...

Answer 1

https://jsfiddle.net/k4w6mz8o/2/

Answer 2

Just because you want the height property to work that way doesn't mean it should work that way, read the spec.
The problem you are trying to solve is solved by grids or flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide. ..