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

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

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

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

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

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

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

При этом редактор (желтый на схеме), должен меняться по высоте автоматически, а у меня скроллинг появляется.
  • Вопрос задан
  • 4703 просмотра
Пригласить эксперта
Ответы на вопрос 3
Alexion
@Alexion
Может вам воспользоваться подобным? jqueryui.com/accordion/
Ответ написан
Первое что пришло в голову так это заюзать таблицы и не мучатся :)

Другой вариант это, при увеличения высоты серого блока уменьшать желтый на величину равную высоте серого, теоретически при равном времени анимации все будет выглядеть плавно, но нужно смотреть
Ответ написан
Комментировать
imater
@imater Автор вопроса
Отлично работает с Таблицей, но можно ли обойтись без табличной верстки? А то у меня какие то нелепые комплексы.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы