Растянуть блок на оставшуюся высоту
 

Некоторое время ломаю голову над такой загадкой.
Есть фиксированная колонка (.col), содержащая два вертикальных блока. Нужно сделать так, чтоб верхний блок (.head) зависел от контента, т.е. при увеличении контента, чтоб он растягивался без появления скролла (как и должны себя вести блоки по умолчанию).
Второй блок (.bottom) по задумке дизайнера должен занимать остаток высоты. При этом, если во втором блоке находится много содержимого, должна появляться полоса прокрутки ТОЛЬКО в этом блоке, а не во всей колонке.
Как это сделать одной строчкой js, я конечно знаю. Но вызывать пересчет высоты при каждом изменении .head не очень красиво, а следить за этим блоком по setInterval тоже такое себе решение.
Я знаю также как это решить в современных браузерах с поддержкой flex.
А можно ли это сделать на css без flex?
Примерная разметка:

<div class="col">
    <div class="head">
        <div class="top1">bla</div>
        <div class="top2">bla</div>
    </div>
    <div class="bottom">
        <ul class="list">
            <li>bla</li>
            <li>bla</li>
...
            <li>bla</li>
        </ul>
    </div>
</div>

песочница здесь - если надо для решения изменить разметку, я не против.

Для новых - новое, т.е. flex.
Для старых - старое, т.е. таблички.)
http://jsfiddle.net/9uq090uL/1/
Само собой можно всё оформить через display:table, по желанию.

Aetae,
я же пробовал через таблицу (display:table), но почему-то не вышло...
Спасибо большое!

Придется всю структуру таблицы реализовать:

<iframe width="100%" height="300" src="http://jsfiddle.net/1859mxqm/1/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

:blink:
или я не так смотрю, или во всех примерах ie идёт лесом

да, точно. вспомнил, почему таблицы не получились.
display: table-cell и position: relative не совместимы :(
Может еще какое-то решение?

Чет я не понял а какой цели там вообще служат position:relative для .bottom и absolute для bottom-scrollarea ?

krasovsky,
без них таблица растягивается на высоту содержимого и скролл не появляется в IE. Хотя и с ними тоже не работает ;)

Ну добавь еще див, с height: 100%

IE9-10 растянут этот блок на всю высоту окна
http://jsfiddle.net/BETEPAH/2eLjyneu/