jQuery: altura div dinámica

Question

Estoy tratando de cambiar el tamaño de un div en la carga de la página y el tamaño de la ventana. El código siguiente se coloca antes del </body>, y funciona bien en la carga de la página, pero no hace nada en el cambio de tamaño de la ventana. Probé la función de cambio de tamaño con una alerta, que se activa al cambiar el tamaño, pero la altura permanece sin cambios.

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

---

actualización: después de un largo descanso, he descubierto lo que está causando el problema. Estoy usando un script jquery para agregar una barra de desplazamiento con estilo en el mismo div que se está cambiando de tamaño. Cuando lo comento, todo cambia bien. He movido la inicialización de la barra de desplazamiento en la misma función que cambiar el tamaño, e intenté cualquier variación que se me ocurra ... todavía no puedo hacer que funcione.

(clase del div # principal de contenido también tiene .scroll-panel)

<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

lo resolvió!

todo lo que se necesitaba era eliminar jScrollPane antes de calcular la altura y volver a aplicarla.

<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

Tenga en cuenta que la función de ventana de cambio de tamaño sólo se activa una vez, después de que la ventana ha sido redimensionada. No se actualiza durante la operación de cambio de tamaño, por lo que si está arrastrando el borde de la ventana para probar esto, no se producirán cambios antes de soltar el botón del mouse.

También, asegúrese de hacer esto dentro de $(document).ready(), así:

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

Aquí es una working demo.

Answer 3

No ejecute la función a menos que la altura del documento sea menor o igual que la altura de la ventana.

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

Tuve problemas en los que el contenido fluiría fuera del div.