Как на мобильных устройствах добиться height 100vh на первом экране?

Ссылка скопирована
1 ответ

Я хочу, чтобы первый экран располагался строго в области видимости.
Не получается этого добиться из-за всплывающих менюх мобильных.браузеров.
Подскажите, пожалуйста, как это обойти?

Дополнительно:

https://stackoverflow.com/questions/37112218/css3-...

Ответы:

svh, lvh, dvh в CSS
https://tproger.ru/articles/novye-edinicy-izmereni...

Вы можете попробовать min-height: -webkit-fill-available;свойство CSS вместо 100vh. Должно помощь!

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Дмитрий К. Ответ

Для того чтобы добиться высоты 100vh на первом экране при просмотре сайта на мобильных устройствах, можно использовать следующий подход.

Во-первых, необходимо установить высоту элемента, который вы хотите сделать на высоту экрана, в 100vh. Это позволит элементу занимать всю высоту экрана.

Далее, чтобы это работало на мобильных устройствах, можно добавить следующий код в раздел вашего HTML документа:

 

Этот код позволяет браузеру правильно масштабировать контент на мобильных устройствах, что позволит элементу занимать высоту экрана.

Также, убедитесь, что у вас нет других элементов, которые могут мешать элементу занимать всю высоту экрана, например, отступы или паддинги.

Еще одним способом добиться высоты 100vh на мобильных устройствах является использование CSS свойства min-height вместо height. Например:

.your-element {
    min-height: 100vh;
}

.your-element { min-height: 100vh; }

Это позволит элементу занимать высоту экрана, но при этом он может растягиваться дальше, если содержимое элемента не помещается на экране.

Надеюсь, эти советы помогут вам добиться высоты 100vh на первом экране при просмотре сайта на мобильных устройствах.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно