Как использовать 100vh правильно?

Question

[Evtera]

Здравствуйте. Такая ситуация:

У сайта есть шапка, под ним есть блок с картинкой на всю высоту экрана. Ему задаю параметр min-height: 100vh. Блок растягивается и появляется скролл размером с высоту шапки сайта.

Подскажите, как можно убрать этот скролл? Перебирать значение min-height не вариант. Пробовал задавать фиксированную высоту у шапки, а потом min-height: calc(100vh - #{$headerHeight}). Работает, но похоже на костыль.

Есть какие-то боле изящные варианты?

Answer 1

[Ankhena]

Можно использовать гриды. Контейнер с высотой 100vh и 2 строки. min-content и 1fr

Comments

[Evtera]

Можно чуть подробнее? С гридами не знаком, к сожалению.

[Ankhena]

Evtera,
grid-template-rows: min-content 1fr

[Evtera]

Ankhena, извиняюсь. Спасибо :-)

[Ankhena]

Evtera, главное, чтобы у вас получилось :)

[Evtera]

Ankhena, только теперь проблема появилась с адаптивом :D. При сужении экрана сетка подстраивается под самый широкий элемент и не даёт остальным сужаться.

[Ankhena]

Evtera, про ширину не понятно, что у вас там.
Высоту разумнее задавать минимальную, а не фиксированную.

[Evtera]

Ankhena, https://trytopersuademe.github.io/RosAlpStroy/main... посмотрите на шапку сайта и попробуйте сузить ширину экрана до 320px. В какой-то момент, шапка перестанет сужаться. Это из-за того, что белому заголовку сайта, который ниже на первом экране, некуда больше сжиматься. Они как бы в связке.

[Ankhena]

Evtera, гриды тут вообще не при чем и 100vh тоже.

Уменьшайте шрифт так, чтобы влез при нужном media.

Вы же ничего не изменяете для мобилок. Вон, в "Почему мы" как было 3 столбца для десктопов, так же и на мобилках рисуете.
И т.д.

Да и картинки имеет смысл менять, а не грузить на мобилки шириной 1440 и по 100КБ весом.

[Evtera]

Ankhena, Странно. Просто если отключить grid сетку, то всё начинает умещаться.

[Ankhena]

Evtera, ну не надо всё в кашу :)
Если вы уберете тот грид, который отвечает за "Почему мы", то разумеется всё влезет. Но только не в 320, а примерно в 440, просто потому что слово Высотные таким шрифтом + отступы это примерно 440.

Но тот грид, ради которого был этот вопрос на ширину никак не влияет.

Делать номера 01, 02 и т.д. картинками это безумие. Для этого есть цифры на клавиатуре, псевдоэлемент и свойства counter-reset и counter-increment.
Перестраивайте этот грид на мобилках в 1 столбик, на планшетах в 2, на десктопах в 3.

[Evtera]

Ankhena, Да номера это тестовая часть. Заказчик пока что сам не определился, чего хочет. Поэтому предварительно вставил изображения :)

[Ankhena]

Evtera, тем более, проще править css, чем нарезать картинки

[Evtera]

Ankhena, там буду картинки скорее всего. Это такая заготовочка. Всё под контролем, кроме гридов :D

[Ankhena]

Evtera, изучайте. Гриды хорошие.