web-dev-qa-db-fra.com

Comment changer la hauteur div sur le redimensionnement de la fenêtre?

J'ai un div sur mon site Web qui devrait être à la hauteur de la fenêtre. Voici ce que j'ai obtenu:

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

Cependant, cela ne change pas automatiquement lorsque la fenêtre est redimensionnée? Est-ce que quelqu'un sait comment réparer ceci?

Merci

jquerywindowheight
29
user278139

Vous devez également le faire dans l'événement resize, essayez ceci:

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

Quelques précisions à ce sujet, afin que la fenêtre soit redimensionnée correctement après chaque rappel, vous devez clarifier la hauteur à récupérer.

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

Sinon, d'après mon expérience, la hauteur continuera d'augmenter maintenant, quelle que soit la façon dont vous redimensionnez la fenêtre. Cela prendra la hauteur de la fenêtre actuelle.

5
toddward

Juste pour montrer le DRY-up suggéré dans le commentaire sur la réponse acceptée:

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

Et bien sûr, c'est un peu idiot car c'est quelque chose qui pourrait être fait avec CSS plus simplement. Mais s'il y avait un calcul impliqué, ce serait une autre histoire. Par exemple, cet exemple qui fait un div remplir le bas de la fenêtre, moins un petit 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);
}
5
elc

En plus de ce que d'autres ont dit, assurez-vous d'extraire le code du gestionnaire d'événements dans une fonction distincte et de l'appeler à partir des gestionnaires d'événements ready et resize. De cette façon, si vous ajoutez du code supplémentaire ou si vous devez le lier à d'autres événements, vous n'aurez qu'un seul endroit où modifier la logique du code.

4
Giorgi

Utilisez l'événement resize.

Cela devrait fonctionner:

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

     $(window).on("resize",function() {

          var bodyheight = $(document).height();

          $("#sidebar").height(bodyheight);
     });

});
0
Dinesh