Как сделать нижний Div резиновым по высоте, при анимации верхнего по $(".div1").slideDown();?

Question

[imater]

Простой вопрос, но поставил меня в тупик.


Верхний серый блок у меня может раскрываться и скрываться анимацией по высоте при помощи jQuery.slideDown(); Т.е. его высота динамически меняется и при помощи javascript менять высоту желтого не красиво.

При этом желтый блок должен менять высоту так, чтобы «Высота серого» + «Высота желтого» = «Высота синего».

Синий в свою очередь равен не высоте экрана, а высоте родительского DIV (красная рамка) и не меняется при этой анимации.

Подскажите, пожалуйста, как это сделать?

Если так будет понятнее, объясню реальную проблему:

Вот тут вся правая панель это синий Div на схеме, строчки: «Основные», «Сайт», «Делегирование», «Дополнительно» — это аккордионы, которые плавно двигаются вниз, меняя высоту верхней части дива (серый на схеме).

При этом редактор (желтый на схеме), должен меняться по высоте автоматически, а у меня скроллинг появляется.

Answer 1

[Alexion]

Может вам воспользоваться подобным? jqueryui.com/accordion/

Comments

[imater]

Я видимо плохо пояснил. Аккордион у меня работает, меняя высоту верхнего дива, мне надо чтобы нижний (под ним) див менял свою высоту так, чтобы верхний + нижний = высота окна. Добавил картинку для пояснения.

[Alexion]

Может тогда все-таки стоит сделать на JS, если он и так уже применяется для slide

Answer 2

[Илья Шабанов]

Первое что пришло в голову так это заюзать таблицы и не мучатся :)

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

Answer 3

[imater]

Отлично работает с Таблицей, но можно ли обойтись без табличной верстки? А то у меня какие то нелепые комплексы.

Вот рабочий пример того, как мне нужно, чтобы работало: jsfiddle.net/RNueT/3/