растянуть div с верхним и нижним полями - css / css3

Question

У меня есть страница с разделами, как показано ниже;

<div id="container">
    <div id="header"></div>
    <div id="content">
        <div id="wrap2"></div>
        <div id="wrap"></div>
    </div>
    <div id="footer"></div>
</div>

У меня есть конкретная высота для wrap2, и я хочу wrap, чтобы заполнить область ниже wrap2, но выше footer. Вы можете увидеть скрипку здесь . Я хочу растянуть wrap между wrap2 и footer. Я ищу чистое решение CSS.

Как я могу это сделать?

Answer 1

Вы не можете с чистым CSS.Это, пожалуй, самая большая жалоба на CSS.Наиболее точным вариантом будет использование JavaScript.При onload и onresize вызывают функцию JS, которая захватывает высоту области просмотра, вычитает высоту нижнего колонтитула и верхнего колонтитула, а затем устанавливает высоту вашего div, чтобы заполнить остальные.

Answer 2

Я решил это, установив padding-bottom: 31px; для #content и установив 100% height для wrap.

Вы можете увидеть результат игры здесь

Спасибо @DA, @Jaspero и @Ima Student