Как сделать блок на всю высоту экрана?

Question

[tkachenkoaanna097]

ни больше, ни меньше
к примеру ест два блока
один 100px;
второй - если высота больше 100vh экрана - то будет прокрутка

Comments

[Ankhena]

1. Через calc
2. Через flex column и flex-grow для второго блока.
3. Через grid и 1fr. Для первого блока можно задавать min-content, а не фикс высоту.

Старайтесь не задавать фиксированную высоту в верстке, при необходимости лучше ограничивать минимальной и/или максимальной.

[tkachenkoaanna097]

Ankhena, так? https://jsfiddle.net/7d0Lkg6z/

[tkachenkoaanna097]

Ankhena, нюанс же в том чтобы и больше не был

[Ankhena]

tkachenkoaanna097,

max-height: calc(100vh - 100px);
  min-height: calc(100vh - 100px);

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

Если вы хотите, чтобы была прокрутка, если контент не влезет, то в вашем случае пишите просто height.

[tkachenkoaanna097]

Ankhena, так и делаю,как Вы говорите
но снизу промежуток большой

[Ankhena]

tkachenkoaanna097, где код-то?

[tkachenkoaanna097]

Ankhena, https://jsfiddle.net/mqcwgp4y/

[Ankhena]

tkachenkoaanna097, Очевидно же, что желтое, это 100px минус высота синего.
Вы написали, что красный блок должен быть высотой 100vh минус 100px.
Высота синего не задана, текста в нем мало, занимает он одну строку.
Значит, внизу остается место.

У вас почти во всех вопросах проблемы не с версткой, а с геометрией или внимательностью.

[Ankhena]

tkachenkoaanna097, Если вы перепишете на гриды и min-content, то такой проблемы не будет вне зависимости от высоты первого блока.

Answer 1

[Никита Михайлов]

Comments

[tkachenkoaanna097]

Никита Михайлов, не совсем о такой разметке была речь
примерно такая
https://jsfiddle.net/92hetq8v/

[Никита Михайлов]

Можно же сделать по образу и подобию. Проанализируйте вёрстку

[tkachenkoaanna097]

Никита Михайлов, это не то?

https://jsfiddle.net/fw4dp1Lg/1/