Расположение трех блоков внутри блока с заданной высотой

#css3 #css #html #html5

                    
Есть блок main с ЗАДАННОЙ высотой в пикселях.
Есть 3 внутренних блока:

top - должен масштабироваться по контенту и ужимать блок middle
middle - должен быть с появляющейся полосой прокрутки (если
   не хватает места контенту)
buttom - с фиксированной высотой в пикселях

Как сделать так, чтобы блок main НЕ растягивался, а оставался такой же высотой, в
тоже время блок top ужимал блок middle своим содержимым?
#main{
    height:200px !important;
    width:100px;
    background:blue;
}
#top{
    background:green;
}
#middle{
    background:red;
    height:100%;
    overflow: auto;
}
#buttom{
    background:blue;
    height:50px;
    bottom:0
}


    
Текст текст текст текст текст текст текст текст текст текст текст
    
Текст текст текст Текст текст текст Текст текст текст Текст
текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст 
    
Текст текст текст


Есть какие-нибудь предположения, как так сделать?
http://jsfiddle.net/5fCcy/3/    

Ответы

Ответ 1

У CSS с высотой вообще большие проблемы, так что я бы не мучился и решил через JS.
Скрипт можно упростить, это я для наглядности так расписал. А пользователи с отключенным
JS пусть смотрят упрощенную версию сайта :)