✏️ Как исправить высоту Zero меню на мобильных устройствах
В чате канала обсуждали проблему, когда высота Zero поп-апа (в частности меню) после скролла на телефонах не подстраивается под динамическую высоту браузерного окна — при скролле адресная строка на телефонах скрывается и окно области просмотра становится больше по высоте.
Собрала для вас 3 решения этой проблемы:
🔸 1 способ
Он самый простой: в настройках вызова поп-апа поставить непрозрачное затемнение фона в цвет поп-апа.
Недостаток такого способа — ваше меню всегда будет выглядеть на 100% ширины экрана. Если вы задумывали вызов меню в виде шторки с фиксированной шириной, то этот способ не для вас.
🔸 2 способ
Поставить на фон zero-блока шейп с высотой 120%, привязка по виндоу верх. В настройках zero поставить высоту по экрану 100% и overflow: visible. Таким образом шейп будет выходить вниз за пределы блока и закрывать собой дыру. Подходит, если у вас неоднотонный фон или ширина меню имеет фиксированное значение.
🔸 3 способ
Использовать этот код:
В коде:
— укажите ID zero блока (по-другому никак, только через ID можно изменить высоту)
— если у вас еще есть шейп на фоне, укажите и его класс тоже (в моем приемере это .zero_bg)
Справка
dvh – относительно новая единица измерения, расшифровывается как dynamic viewport height (динамическая высота вьюпорта). Соответственно, элементы с высотой 100dvh будут менять свою высоту, если меняется высота окна просмотра сайта.
Недостаток такого способа
Видна задержка при изменении высоты zero блока, на секунду вы будете видеть дыру под меню, если начнёте скроллить пока у вас открыто меню.
Но если первые два способа вам не подходят, можете попробовать этот.
Любые вопросы или другие решения этой проблемы можете посоветовать в комментариях 😊
#верстка #тильда
