jQuery - динамическая высота div

Question

Я пытаюсь изменить размер div при загрузке страницы и изменении размера окна. Код ниже помещается перед </body>, и он прекрасно работает при загрузке страницы, но ничего не меняет при изменении размера окна. Я протестировал функцию изменения размера с предупреждением, которое срабатывает при изменении размера, но высота остается неизменной.

<script type='text/javascript'>
    $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});

    $(window).resize(function(){
        $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});
        alert('resized');
    });
</script>

---

обновление: после долгого перерыва я обнаружил, что является причиной проблемы. Я использую скрипт jquery для добавления стилизованной полосы прокрутки к тому же div, размер которого изменяется. Когда я это комментирую, все отлично меняется. Я переместил инициализацию полосы прокрутки в той же функции, что и изменение размера, и попробовал любые варианты, которые мне только подумали ... все еще не могу заставить ее работать.

(у элемента # main-content также есть класс .scroll-pane)

<script type='text/javascript'>
$(function(){
    $('#main-content').css({'height':(($(window).height())-361)+'px'});
    $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15});

    $(window).resize(function(){
          $('#main-content').css({'height':(($(window).height())-361)+'px'});
    });
});
</script>

Answer 1

решено!

все, что нужно, это удалить jScrollPane перед вычислением высоты и повторно применить ее.

<script type='text/javascript'>
$(function(){
    $('.scroll-pane').css({'height':(($(window).height())-361)+'px'});
    $('#main-content').jScrollPane({scrollbarWidth:15, scrollbarMargin:15});

    $(window).resize(function(){
          $('.scroll-pane').jScrollPaneRemove();
          $('#main-content').css({'height':(($(window).height())-361)+'px'});
          $('.scroll-pane').jScrollPane({scrollbarWidth:15, scrollbarMargin:15});
    });
});
</script>

Answer 2

Обратите внимание, что функция изменения размера окна срабатывает только один раз, после изменения размера окна. Он не обновляется во время операции изменения размера, поэтому, если вы перетаскиваете границу окна, чтобы проверить это, никаких изменений не произойдет, пока вы не отпустите кнопку мыши.

Кроме того, убедитесь, что вы делаете это в $(document).ready(), например:

<script type='text/javascript'>
$(function()
{
    $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});

    $(window).resize(function(){
        $('#main-content') .css({'height': (($(window).height()) - 361)+'px'});
        alert('resized');
    });
});
</script>

Вот демоверсия .

Answer 3

Не выполняйте функцию, если высота документа не меньше или равна высоте окна.

$(function() {
  if($(document).height() <= $(window).height()) {
    $('#wrapper').css({ 'height': ($(window).height()) });
    $(window).resize(function(){
      $('#wrapper').css({ 'height': ($(window).height()) });
    });
  }
});

У меня были проблемы, когда содержимое выходило за пределы div.