Расстягиваем внешний div самым внутренним по высоте

[sarcus]

Есть вложенные блоки

<div id="d1">

<div id="d2">

<div id="d3">

.......

</div>

</div>

</div>

Нужно чтобы все блоки имели высоту 100%  и самый внутренний div (он может быть и 4-м... вложением) растягивал все внешние в зависимости от контента если контент больше 100%.

Желательно без js.

Edited April 21, 2017 by sarcus

[Даниил Виттманн]

Разве для этого min-height не подходит? https://jsfiddle.net/erc9s7nn/1/

Edited April 24, 2017 by Даниил Виттманн
Поправка

[sarcus]

Не то. Изначально высота внутреннего блока должна быть 100% от высоты экрана. Далее, в зависимости от контента, растягиваем внешний блок. (+ поддержка ie8)

Edited April 25, 2017 by sarcus

[Igor Schnaider]

Таблицей сделайте.

[sarcus]

Ну только что, думал можно как-то иначе, всю голову сломал Но таблицами  ie8 не хочет растягивать внутренние дивы, у меня не получилось, и в твоем примере так же, а у меня он еще есть, так бы забил.

Edited April 25, 2017 by sarcus

[Igor Schnaider]

Ну тогда по-уродски вешать классы и чередовать table и table-cell.

https://codepen.io/anon/pen/OmbLVy

 

[Даниил Виттманн]

В 25.04.2017 в 06:33, sarcus сказал:

Изначально высота внутреннего блока должна быть 100% от высоты экрана

min-height: 100vh;

1vh - это высота в 1% относительно высоты экрана, соответственно 100vh - 100%

[Igor Schnaider]

19 минут назад, Даниил Виттманн сказал:

1vh - это высота в 1% относительно высоты экрана, соответственно 100vh - 100%

IE 8 их не поддерживает.

http://caniuse.com/#search=vh

[sarcus]

Жаль конечно, нет красивого решения. Большое спасибо за ответы.  Просто задачка интересная, но не для ie8.