css: Высота элемента 100vh в режиме адаптивного дизайна

Для урока по css/sass потребовалось изменить меню для отображения на устройствах с небольшим экраном. Для этого элементы меню были отображены на всплывающем окошке. Высота окошка была установлена в 100% по вертикали от области просмотра (видимой части окна). То есть 100vh.
Здесь я уже что-то исправлял, но в итоге переключился на браузер MS Edge, т.к. он корректно работал с высотой в единицах vh. Чуть позже мне потребовалось вернуться к этому уроку, чтобы отработать практические задания, но у меня перестала работать «высота»:
всплывающее меню не растягивается на 100% по высоте
При ширине окна в 320 пикселей высота была не 100%, а примерно 90%. Причём правило срабатывало и ничем не перекрывалось.

Решение

В одном из комментариев нашёл такой костыль:

html, body {
    overflow: auto;
}

Таким образом для данного урока пришлось добавить новое правило:

_media.sass
    @media (max-width: 575px)
        .menu
            width: 85%
            height: 100vh
        html, body
            overflow: auto

всплывающее меню растянулось на 100% по высоте
Теперь меню растянуто на 100% по высоте видимой части окна.

Что мне вообще непонятно, так это такой момент — если теперь удалить новое правило и сохранить файл, то меню будет и дальше растягиваться на 100% по высоте, как и должно было быть! Если есть умные мысли, прошу написать в комментариях что это было…

 



Подписаться
Уведомление о
guest
0 Комментарий
Inline Feedbacks
View all comments