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

Question

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

<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, который изменяется. Когда я прокомментирую это, все меняется отлично. Я переместил инициализацию прокрутки в той же функции, что и размер, и попробовал любые варианты, о которых я могу думать .. все еще не может заставить его работать.

(ДИВ # основного содержимого также .scroll-панели класса)

<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> 

Вот working demo.

Answer 3

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

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

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