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

Question

[urajo]

Когда даю блоку height 100% он становится больше высоты родителя, как его сделать по высоте как родитель?

Comments

[Ankhena]

Судя по скринам, он как раз таки и становится 100% высоты родителя. Поскольку, в родителе кроме него есть кто-то ещё, то блок выпадает.

Используйте гриды и единицы fr или флекс и flex-grow (а скорее margin-top auto).

И absolute у кнопки лишний.

Answer 1

[strelok011]

Для начала - почему вы считаете что высота блока не равна высоте родителя? судя по картинкам (жаль что нет в песочнице кода) он таки равен высоте родителя при установке height = 100%. Вы упускаете момент что в родителе находятся два дива, а не один, и у первого уже есть своя высота! в сумме два блока будут равны 100% + высота первого блока. Только и всего.
Если вы желаете заполнение фиксированного по высоте родителя вложенными блоками, можно обратиться к флексам.
у родителя будет display: flex; flex-direction: column; height:...
у второго дива, который вы хотите дотянуть до края - flex-grow: 1;
Другое дело - зачем?
В данном эпизоде я вижу больше проблем в верстке текста с кнопкой.
Тут вернее было бы у родителя заменить высоту на минимальную высоту, чтобы не обрезать наполняющий контент, разобраться с контентом второго дива, просто задать обертку вокруг текста дивом без фиксации высоты, добавить маржин снизу и следом разместить кнопку.

Answer 2

[Pavel Beloborodov]

Попробуйте родителю задать
position: relative
Прям прописать его в свойствах. (да я знаю что это дефолтное значение )

Comments

[strelok011]

Дефолтное значение вовсе не relative. Почитайте документацию.
Дефолтное - static.
А вообще этот атрибут не влияет на связь высоты родителя и потомка.
Высота потомка будет связанной с родительской в том случае, если у родителя она определена/назначена.

[Pavel Beloborodov]

Да точно! сори, за без грамотность