Como alterar a altura div no redimensionamento da janela?

Eu tenho um div no meu site que deve ser a altura da janela. Isso é o que eu recebi:

$(document).ready(function() { var bodyheight = $(document).height(); $("#sidebar").height(bodyheight); }); 

No entanto, isso não muda automaticamente quando a janela é redimensionada? Algum corpo sabe como consertar isso?

obrigado

Você também precisa fazer isso no evento de resize , tente isto:

 $(document).ready(function() { $(window).resize(function() { var bodyheight = $(this).height(); $("#sidebar").height(bodyheight); }).resize(); }); 

Alguns esclarecimentos sobre isso, para que a janela seja redimensionada corretamente após cada retorno de chamada, você deve esclarecer qual altura recuperar.

  $(document).ready(function() { $(window).resize(function() { var bodyheight = $(window).height(); $("#sidebar").height(bodyheight); }); }); 

Caso contrário, pela minha experiência, a altura continuará aumentando agora importa como você redimensiona a janela. Isso levará a altura da janela atual.

Apenas para mostrar o DRY-up sugerido no comentário sobre a resposta aceita:

 $(document).ready(function() { body_sizer(); $(window).resize(body_sizer); }); function body_sizer() { var bodyheight = $(window).height(); $("#sidebar").height(bodyheight); } 

E, claro, isso é meio bobo, já que é algo que pode ser feito com CSS de forma mais simples. Mas se houvesse um cálculo envolvido, seria uma história diferente. Por exemplo, este exemplo que faz um div preencher a parte inferior da janela, menos um pequeno fudgefactor.

 $(function(){ resize_main_pane(); $(window).resize(resize_main_pane); }); function resize_main_pane() { var offset = $('#main_scroller').offset(), remaining_height = parseInt($(window).height() - offset.top - 50); $('#main_scroller').height(remaining_height); } 

Além do que os outros disseram, certifique-se de extrair o código do manipulador de events em uma function separada e chamá-lo de ready e resize manipuladores de events. Dessa forma, se você adicionar mais algum código ou precisar vinculá-lo a outros events, você terá apenas um local para alterar a lógica do código.

Use o evento de resize .

Isso deve funcionar:

  $(document).ready(function() { $(window).resize(function() { var bodyheight = $(document).height(); $("#sidebar").height(bodyheight); }); }); 
 $(document).ready(function() { $(window).on("resize",function() { var bodyheight = $(document).height(); $("#sidebar").height(bodyheight); }); }); 
    Intereting Posts