Почему блок DIV, воспринимает height: 100% как всю высоту сайта?

Question

[Тимофей Михайлов]

Ссылка на JSFiddle
По сути, в чём вопрос.
У меня есть главный div в котором я задал

position: absolute;
	height: 100%;

Далее, в него накидал других div-ов. А в конце, решил заполнить пустое место div-ом синего цвета.
Прописал ему height: 100%, но он почему взял и ушёл ниже окна ...
Я то думал, он будет наследоваться, и заполнит всё свободное место ... А он мне всё подпортил ...
Не осязаю логику ... Подскажите пожалуйста, где я не прав ...

Answer 1

[tyzberd]

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

Answer 2

[Владимир]

То что вы хотите, чтобы свойство height так работало, не означает что оно должно так работать, почитайте спецификацию.
Проблема, которую вы пытаетесь решить решается гридами или флексбоксом
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide...