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

#jquery #css #overflow

#jquery #css #переполнение

Вопрос:

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

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

.высота оболочки фиксирована.

.главное — автоматическое переполнение.

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

моя цель

.main будет увеличен (высота уменьшена), поскольку .slide занимает часть .wrapper

Есть идея?

Ответ №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 , чтобы сделать это более плавным.

1. Отличное решение. Просто не забудьте отключить нажатую вами кнопку, чтобы вы не могли скользить вверх, если она уже поднята, поскольку она будет продолжать добавлять / удалять высоту при каждом нажатии. Еще выполните проверку высоты 🙂

2. Спасибо, Сэмич, можем ли мы заставить его работать параллельно со slideUp / Down?

3. Небольшая ошибка при повторном нажатии одной и той же кнопки, но 1 в любом случае.

4. Ребята, я просто хотел показать, где OP следует искать решение :). Итак, извините за ошибки в коде 😉

Ответ №2:

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