Растягивающийся по вертикали блок

[Odrin]

Добрый день.

Вот такой вопрос. Зеленый блок растягивается на высоту страницы. Два голубых блока - фиксированной высоты, между блок, в котором много элементов и вертикальная прокрутка (список). Необходимо, что бы красный блок растягивался и занимал все пространство между синими блоками. Как это сделать?

Интересует решение задачи именно на CSS, т.к. делать это через JS - путь к ошибкам и трудностям в будущем.

P.S. В идеале, высота голубых блоков неизвестна и может меняться.

Edited April 4, 2013 by Odrin

[Switch74]

1. зеленый - это и есть страница или он просто растягивается на высоту всей страницы, что тогда еще может влиять на высоту страницы (или вы имели ввиду - высоту окна браузера?)

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

3. сделать можно через position:fixed; для синих блоков

[Odrin]

1. зеленый - это и есть страница или он просто растягивается на высоту всей страницы, что тогда еще может влиять на высоту страницы (или вы имели ввиду - высоту окна браузера?)

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

3. сделать можно через position:fixed; для синих блоков

1. Я не совсем подробно описал. Зеленый блок - не вся страница. Сверху там еще шапка. Но это не важно в общем-то.

2. Нет, вертикальная полоса прокрутки там всегда есть, там очень много элементов.

3. Не понимаю, как, если честно =) Можно подробней?

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

[Switch74]

могу предложить вот такой вариант

http://jsfiddle.net/T7r6y/

но он не совсем удовлетворяет вашему идеальному условию

можно попробовать реализовать через таблицы

[Odrin]

А зачем у top делать position:absolute?

Блин, надо делать, работа стоит... А я никак не могу решиться, JS или Ваш способ.

[Switch74]

top можно и без position:absolute, но мне почему-то так больше нравится

[mrnobody]

Вот еще способ http://jsfiddle.net/T7r6y/1/, немножко модифицировал вариант Switch74, только не знаю, в лучшую или худшую сторону.

Edited April 4, 2013 by mrnobody