Как растянуть на 100% высоты вложенный блок?

Question

[alex4answ]

Добрый день, столкнулся с задачей, которую уже не помню как решал ( и решал ли вообще ).

Есть лейаут, где контентная часть растянута на 100% высоты экрана, есть глубоко вложенный блок, который нужно растянуть на 100% высоты контентной части.



Как это можно сделать без js, без абсолютного позиционирования и тп?

Comments

[Ankhena]

Растягивать по очереди его родителей https://jsfiddle.net/qv3spbu7/

Answer 1

[iBird Rose]

Заменяешь min-height: 100vh; на height: 100vh; и даешь всем родителям нужного тебе блока height: 100%;

Comments

[alex4answ]

iBird Rose, думал над этим вариантом, но я, к сожалению, не могу вмешаться в layout компонент, тк он грубо говоря внешний, и менять его поведение и стили я не могу, мб есть еще варианты ?

[Fallenyasha]

Можно в лоб, для main поставить position: relation, для всех дочерних элементов удостовериться что нет position: fixed | absolute | relation, и для последнего элемента i-need-stretch поставить position: absolute; top: 0; left: 0; right: 0; bottom: 0;

main { position: relative; }
.i-need-stretch { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }