Страницы

Поиск по вопросам

суббота, 6 июля 2019 г.

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

Есть блок 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/


Ответ

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

Комментариев нет:

Отправить комментарий