jQuery - altezza div dinamica

Question

Sto provando a ridimensionare un div su pageload e ridimensionare le finestre. Il codice seguente è posizionato prima dello </body> e funziona correttamente con il pageload, ma non esegue ridimensionamenti della finestra. Ho testato la funzione di ridimensionamento con un avviso, che si attiva al ridimensionamento, ma l'altezza rimane invariata.

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

---

aggiornamento: dopo una lunga pausa, ho scoperto che cosa sta causando il problema. Sto usando uno script jquery per aggiungere una barra di scorrimento in stile sullo stesso div che viene ridimensionato. Quando commento, tutto si ridimensiona. Ho spostato l'inizializzazione della barra di scorrimento con la stessa funzione di ridimensionamento, e ho provato qualsiasi variazione che possa pensare .. ancora non riesco a farlo funzionare.

(classe # main-content div ha anche .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

risolto!

tutto quello che serviva era rimuovere jScrollPane prima di calcolare l'altezza e riapplicarlo.

<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

Si noti che la funzione di finestra di ridimensionamento spara solo una volta, dopo che la finestra è stata ridimensionata. Non si aggiorna durante l'operazione di ridimensionamento, quindi se stai trascinando il bordo della finestra per testarlo, non si verificheranno modifiche prima di rilasciare il pulsante del mouse.

Inoltre, assicuratevi di fare questo all'interno $(document).ready(), in questo modo:

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

Ecco un working demo.

Answer 3

Non eseguire la funzione a meno che l'altezza del documento sia inferiore o uguale all'altezza della finestra.

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

Ho riscontrato problemi in cui il contenuto sarebbe uscito dal div.