Почему position: absolute + height 100% в медиазапросе не растягивает заливку background-color на всю ширину экрана?

Question

[GAS-ART]

Есть разметка HTML и стили CSS

https://jsfiddle.net/Gavr_Gavr/nhLjproa/9/

Не могу понять почему в медиазапросе при выборе абсолютного позиционирования (clas ".menu__body") не работает height: 100%;. При смене позиционирования на fixed все начинает работать и высота растягивается на весь экран. Почему так происходит? Сама задача была сделать заливку на всю высоту экрана и она в целом решена, но просто хочу разобраться почему работает именно так?

Answer 1

[GAS-ART]

Разобрался:
Для width/height обычно процент высчитывается от ширины/высоты родителя, но при position:fixed, процент берётся от ширины/высоты окна (а не родителя и не документа). А так как высота задана 100% то при fixed он тянет ее на весь экран.

Answer 2

[Дядя Толя]

body, html { height: 100% } 
body { position: relative } 
/* relative - чтобы дочерний элемент знал относительно 
чего он позиционируется и растягивается */
.menu_body { height: 100% }

Comments

[Дядя Толя]

Забыл пояснить.
Твой div (если это он) должен знать высоту своего родителя, чтобы растянуться.

[GAS-ART]

Дядя Толя, Спасибо, за ответ. Про родителя я понял, но почему тогда этот пример работает с position: fixed? ведь высота родителя не задана, но при этом позиционирование height всетаки растягивается на всю ширину.

[Дядя Толя]

Артем, Элемент с фиксированной позицией позиционируется относительно области просмотра или самого окна браузера.

[Дядя Толя]

Артем, https://jsfiddle.net/sh4rov/8qwmpujr/99/

На скорую руку накидал просто для простого примера.

[GAS-ART]

Дядя Толя, спасибо