Выбор ответа Middle Адаптивность обновлено
100vh на мобильном
Вопрос
Первый экран с height: 100vh на телефоне уходит под адресную строку, и кнопка внизу не видна. Какая замена правильная?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: min-height: 100svh (или 100dvh). В мобильных браузерах vh считается от большого viewport, когда панели скрыты. svh берёт маленький viewport, когда панели видны, а dvh следует за текущим состоянием.
Варианты ответа
height: 100%у блока без других правилheight: 100vwheight: calc(100vh - 56px), вычтя высоту панелиmin-height: 100svh(или100dvh)правильный ответ
Разбор
В мобильных браузерах vh считается от большого viewport, когда панели скрыты. svh берёт маленький viewport, когда панели видны, а dvh следует за текущим состоянием. 100% без высоты у родителей ничего не даст. vw это ширина, а не высота. Вычитать 56px хрупко: высота панелей разная в разных браузерах и меняется при прокрутке.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.