Как установить высоту 2 блокам, чтобы она была равна 100vh?

Question

[LaTherapist]

Добрый день. Подскажите, пожалуйста, как реализовать:
- Есть страница, сверху: 1) блок ( навигация + лого) 2) изображение.
- У блока 1 и 2 разные фоны.
- На всю высоту экрана должны отображаться именно 2 блока.

Когда устанавливаю высоту контейнеру - не растягивается фото со 2-го блока.
Когда устанавливаю фиксированные отступы с макета - игнорируется 100vh.
Сделать 2 блока с одним фоном - не составляет проблемы, а вот с 2-мя не получается.

Comments

[Ankhena]

Покажите макет и код в песочнице jsfiddle.net или codepen.io

Иначе не понятно о каких отступах речь. И 100vh это суммарная высота блоков или каждого?
https://jsfiddle.net/u7x0r534/

[LaTherapist]

Например, вот это изображение.
Все 3 блока в сумме должны быть равны 100vh. (a+b+c=100vh)

Как я понимаю, фиксированная высота - это моветон.
Или нужно просто каждой секции выставлять height в процентах или vh?

[Ankhena]

LaTherapist,
использовать гриды и grid-template-rows: min-content min-content 1fr;
Всё.

Answer 1

[Ankhena]

LaTherapist, держите, гридами https://jsfiddle.net/u7x0r534/2/

Comments

[LaTherapist]

Спасибо, как раз собирался заглянуть в этот раздел.