Используйте jQuery для отражения высоты динамического элемента

Question

У меня есть боковая панель на моей странице, я хочу, чтобы она всегда была на 100% размера контейнера. К сожалению, я не могу сказать элементу сделать это только через CSS, поскольку страница имеет переменную высоту из-за динамического содержимого.

Можно ли использовать jQuery, чтобы найти высоту контейнера содержимого и отрегулировать высоту боковой панели в соответствии с ней?

Я нашел несколько плагинов jQuery, которые делают то, что я хочу, но чувствую, что они слишком сложны (и я все равно не могу заставить их работать!).

Answer 1

Я собираюсь продолжить с Ответом Дамовизы.

$(document).resize(function(){
     $('#sidebar').height($('#container').height());
});

Тем не менее, это может привести к значительным потерям, если вы измените размер страницы. Вы можете попробовать это

  $(document).resize(function(){         
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function() {
            $('#sidebar').height($('#container').height());
        }, 100);
    });

Во втором примере после изменения размера он изменит только 100 микросекунд.

Это также предполагает, что $(document).resize() будет срабатывать при изменении размера страницы. Вы всегда можете заключить его в функцию и вызывать по завершении любого slideDown() и т. Д.

Answer 2

Предполагая, что идентификатор вашего контейнера - "контейнер", а идентификатор вашей боковой панели - "боковая панель", вы можете попробовать следующее (без проверки!)

$(document).ready(function() {
    $('#sidebar').height($('#container').height());
});

Это должно (при загрузке документа) изменить размер высоты боковой панели до высоты контейнера.