Есть блок 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
}
<div id="main">
<div id="top">Текст текст текст текст текст текст текст текст текст текст текст</div>
<div id="middle">Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст Текст текст текст </div>
<div id="buttom">Текст текст текст</div>
</div>
Есть какие-нибудь предположения, как так сделать? http://jsfiddle.net/5fCcy/3/