Как сделать такую страницу?

Question

[MeMoJlor]

Как сделать такую страницу, чтобы он занимал весь экран и не было скролла?
62management.com

Задаю телу

body{
   height: 100vh;
   max-height: 100%;
   }

но из-за навбара браузера в мобильном хроме, появляется скролл и скрывается часть контента.

Comments

[Никита]

Завалите нас кодом и мы поможем.

Answer 1

[Андрей Суровцев]

всё очень просто, ширину и высоту страницы менять не нужно, нужно всего лишь отключить скролл
html {
overflow-y: hidden;
}

Решение подойдёт таким страницам, где не нужна прокрутка совсем.

А вот решение, где прокрутка работает, но самого ползунка нет.
html::-webkit-scrollbar {
width: 0;
}

Comments

[Андрей Суровцев]

если что-то не сработало добавьте !important, чтобы получилось вот так "width:0 !important;".
Не совсем валидно, но шанс на успех увеличится.

[Ankhena]

если что-то не сработало добавьте !important, чтобы получилось вот так "width:0 !important;".

Когда же руки будут отваливаться сами от таких советов...
Изучайте специфичность селекторов и другим советуйте это же, а не лепить important'ы в любой непонятной ситуации.

[Андрей Суровцев]

Ankhena, мне не платят, чтобы я долго расписывал, почему специфичность селекторов не позволяет иногда без !important добавлять необходимое свойство, я всего лишь подсказал способ "на скорую руку".

если вы пришли поучить, то лучше бы помогли, а не дерзили.

[Ankhena]

Андрей Суровцев, я и помогаю, это вполне заметно по моему профилю))
Important нужен, чтобы инлайновые стили перебивать, обычно от плагинов, а не помойку из своего кода делать.

[Андрей Суровцев]

Ankhena, в данном вопросе вы помогли чем-то?

[Ankhena]

Андрей Суровцев, прекратите устраивать детский сад, вместо того, чтобы принять во внимание замечание и повысить свой же уровень.

[Андрей Суровцев]

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

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

Так же у меня замечание, вы не ответили на мой вопрос, который я поставил чуть раньше.

[Ankhena]

Андрей Суровцев, у вас еще и !important невалидный... Может, проверите валидатором?
Я в этом больше не участвую.
Надеюсь только, что автор вопроса изучит эту тему, если нет, может обратиться в личку. А у вас всё равно нет желания разбираться.

[Андрей Суровцев]

Ankhena, знания вроде есть, а логики в общении 0%, ты бы вышла на улицу, подышала воздухом что ли

Answer 2

[xdevelx]

А если так?

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

Если нужно именно чтобы по высоте вьюпорта и не больше, то замените min-height на height.

Answer 3

[Василий]

Можно через медиа-запросы указать для мобильных/планшетных устройств.
media (max-width: 900px)
.home-wrapper {
padding: 0 110px;
top: 50px;
height: calc(100% - 175px );