Правильно будет сказать, что свойство не работает так как ожидается. Оказывается, что часть контейнера с установленной высотой 100vh, может быть перекрыта нижней панелью браузера. Разберемся как решается данная проблема.
В интернете можно найти решения использующие js, но мы их здесь рассматривать не будем.
CSS фиксы сводятся к использованию переменной webkit: -webkit-fill-available:
|
|
height: -webkit-fill-available; |
Эта конструкция задаёт высоту равную видимой области на мобильных устройствах. Обычно задаётся следующая комбинация стилей контейнера:
|
|
.container { height: 100vh; max-height: -webkit-fill-available; } |
Т.е. мы задаём высоту 100vh, но максимально ограничиваем её значением -webkit-fill-available. Так это работает и на десктоп и на мобиле.
Данный трюк работает на всех браузерах, кроме IE 11 (на Edge уже работает).
Если в контейнере есть вложенные обертки, то им для сохранения высоты контейнера в 100% нужно задать следующие стили:
|
|
.container .sub-wrapper { height: 100%; height: -webkit-fill-available; } |
Данная запись опубликована в 23.07.2021 22:20 и размещена в рубрике Танцы с CSS.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Июнь 15, 2023 г.
Сложно коротко описать поведение блока, а речь пойдет о sticky позиционировании в css.
Невероятно классная штука position: sticky давно уже существует в спецификации, но пока ощутимая доля интернетчиков пользовалось IE, который не поддерживал значение ...
Читать
Сентябрь 10, 2024 г.
Flex опирается на другие принципы нежели блочные контейнеры, и иной раз не понятно какими свойствами управляется дочерний контейнер во flex родителе.
Рассмотрим пример, когда у нас есть flex контейнер с двумя дочерними элементами.
[crayon-6ab7bf5ec957e227524533/] ...
Читать
Май 3, 2018 г.
В CSS, для позиционирования фонового изображения в контейнере, мы используем свойство background-position.
Свойство можно задать отдельно для оси X и Y, кроме того можно задать 2, 3 или 4 параметра.
Классический случай - позиционирование с ...
Читать
Апрель 26, 2025 г.
Эта анимация создаёт эффект, будто элемент "приподнимается" над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow, иногда в сочетании с лёгким смещением (transform: translateY(-2px)).
Это статья из цикла заметок ...
Читать
Добрый день, большое спасибо с данную статью!