CSS / jQuery: уменьшить высоту переполненного div, когда другой div скользит в

Question

Вот моя скрипка http://jsfiddle.net/vZjnd/

Учитывая факты

.wrapper высота фиксирована.

.main is overflow-auto.

Содержание .slide является переменным, поэтому высота может изменяться время от времени.

моя цель -

. Домен, который нужно подтолкнуть вверх (высота уменьшается), поскольку .slide занимает часть .wrapper

Есть идеи?

Answer 1

Вот мое решение:

$('#up').click(function() {
    $('.slide').slideUp(function() {
        $('.main').height($('.main').height() + $('.slide').height() + 'px');
    });
});

$('#down').click(function() {
    $('.slide').slideDown(function() {       
        $('.main').height($('.main').height() - $('.slide').height() + 'px');
    });
});

код: http://jsfiddle.net/vZjnd/5/

Вы можете использовать animate, чтобы сделать его более плавным.

Answer 2

Единственный способ, которым я мог придумать, это сделать следующее: Добавить новое правило в onclick, $ ('. Main'). Animate ({'height': '- = 15px'}, 500); или используйте + = когда убираете? но это означает, что полоса прокрутки исчезнет во время анимации.