Правильно будет сказать, что свойство не работает так как ожидается. Оказывается, что часть контейнера с установленной высотой 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.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Мало букафф? Читайте есчо !
Сентябрь 1, 2025 г.
Ещё недавно для прогресс-бара чтения на сайте приходилось подключать JavaScript: отслеживать событие scroll, вычислять процент прокрутки и менять ширину элемента. Теперь это можно сделать чисто на CSS, благодаря новой возможности — Scroll-driven animations. ...
Читать
Октябрь 19, 2015 г.
Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса.
Этот кусочек скрипта привязывает нас к событию onscroll окна. ...
Читать
Май 29, 2023 г.
Иногда дизайн требует, чтобы все слова заголовка или слогана были с новой строки. Можно добавить <br /> после каждого слова, но можно и обойтись изменениями в CSS.
Трюк очень прост, мы задаём достаточно большой разрыв между словами, чтобы гарантировано ...
Читать
Октябрь 26, 2015 г.
Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...
Читать
Добрый день, большое спасибо с данную статью!