Question

Here is my fiddle http://jsfiddle.net/vZjnd/

Given the facts

.wrapper height is fixed.

.main is overflow-auto.

.slide content is variable so height is variable from time to time.

my goal is

.main to be pushed up (height reduced) as .slide occupies part of .wrapper

Any idea?

Answer 1

Here is my solution:

$('#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');
    });
});

code: http://jsfiddle.net/vZjnd/5/

You can use animate to make it more smoothly.