jQuery - altura div dinâmico

Question

Eu estou tentando redimensionar uma div em pageload ea janela de redimensionamento. O código abaixo é colocado antes </body>, e ele funciona muito bem em pageload, mas não faz nada na janela de redimensionamento. Eu testei a função de redimensionamento com um alerta, o que desencadeia no redimensionamento, mas a altura permanece inalterada.

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

---

atualização: após uma longa pausa, eu descobri o que está causando o problema. Eu estou usando um script jQuery para adicionar uma barra de rolagem estilo na mesma div que está sendo redimensionada. Quando eu comentá-lo, tudo redimensiona bem. Eu mudei a inicialização barra de rolagem na mesma função de redimensionamento, e tentou quaisquer variações que eu posso pensar .. ainda não pode fazê-lo funcionar.

(o # div main-conteúdo também tem classe .scroll-painel)

<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

resolvido!

tudo o que precisava estava removendo JScrollPane antes de calcular a altura, e re aplicando-lo.

<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

Note que a função de janela de redimensionamento só é acionado uma vez, depois que a janela foi redimensionada. Não atualizar durante a operação de redimensionamento, por isso, se você está arrastando a borda da janela para testar isso, nenhuma mudança vai acontecer antes de você deixar de ir ao botão do mouse.

Além disso, certifique-se de fazer isso dentro $(document).ready(), como este:

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

Aqui é um trabalhando demonstração .

Answer 3

Do not executar a função a menos que a altura documento é menor ou igual à altura da janela.

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

Eu tive problemas onde o conteúdo fluiria fora da div.