Как задать высоту дочернего блока на высоту родителя, который растянут на высоту экрана?

Question

[Anikav]

Здравствуйте.

Есть задача: сделать верстку секциями, размер секции должен быть минимум в высоту окна браузера. Если контента больше, то секция может растянуться по высоте контента на сколько нужно. В секции должен быть дочерний блок, который тоже должен быть растянут на высоту родителя.

Делаю указывая min-height: 100vh для секции и height: 100% для дочернего блока. Дочерний блок не растягивается на высоту секции. Если использовать хак с height: 1px для секции, то дочерний блок растягивается, но в случае, если контента в секции больше, чем на 1 экран, он вываливается из нее.

Пример на jsfiddle

Answer 1

[Dima Polos]

.section{
position: relative;
}
.wrapper{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right:0;
}

Comments

[Anikav]

Такой вариант не работает. Контент так же вываливается, на jsfiddle видно, если промотать окно с результатами вниз, высота второй секции не увеличился по контенту и он выпадает сквозь третий вниз.

[Dima Polos]

Anikav, да, уже понял, не внимательно вопрос прочитал. Флексами вариант, гриды тоже уже потихоньку можно) Зависит от заказчика, какая поддержка нужна.

Answer 2

[cssfish]

если бы это было можно сделать вменяемым путем, никто не сочинял бы мануалов про то как сделать колонки одинаковой высоты.

используйте флексы, тут они как раз в тему.