Gavr_Gavr
@Gavr_Gavr

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

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

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

Не могу понять почему в медиазапросе при выборе абсолютного позиционирования (clas ".menu__body") не работает height: 100%;. При смене позиционирования на fixed все начинает работать и высота растягивается на весь экран. Почему так происходит? Сама задача была сделать заливку на всю высоту экрана и она в целом решена, но просто хочу разобраться почему работает именно так?
  • Вопрос задан
  • 307 просмотров
Решения вопроса 1
Gavr_Gavr
@Gavr_Gavr Автор вопроса
Разобрался:
Для width/height обычно процент высчитывается от ширины/высоты родителя, но при position:fixed, процент берётся от ширины/высоты окна (а не родителя и не документа). А так как высота задана 100% то при fixed он тянет ее на весь экран.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
body, html { height: 100% } 
body { position: relative } 
/* relative - чтобы дочерний элемент знал относительно 
чего он позиционируется и растягивается */
.menu_body { height: 100% }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы