web-dev-qa-db-ja.com

ウィンドウのサイズ変更時に高さdivを変更するには？

私は自分のウェブサイトに、ウィンドウの高さであるdivを持っています。これは私が得たものです：

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

しかし、ウィンドウのサイズが変更されても自動的には変更されませんか？これを修正する方法を知っている人はいますか？

ありがとう

jquerywindowheight
29
user278139

また、resizeイベントでそれを行う必要があります。これを試してください：

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

これに関するいくつかの明確化、各コールバック後にウィンドウのサイズを正しく変更するには、取得する高さを明確にする必要があります。

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

そうでなければ、私の経験から、ウィンドウのサイズを変更する方法に関係なく、高さは増加し続けます。これは、現在のウィンドウの高さを取得します。

5
toddward

受け入れられた回答のコメントで提案されたドライアップを表示するだけです：

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

そしてもちろん、これはCSSでより簡単に実行できるものなので、一種のばかげた話です。しかし、関係する計算があった場合、それは別の話になります。たとえば、divをウィンドウの下部から少しファッジファクターを差し引いて埋めるこの例です。

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

他の人が言ったことに加えて、イベントハンドラコードを別の関数に抽出し、readyおよびresizeイベントハンドラから呼び出すようにしてください。そうすれば、さらにコードを追加したり、他のイベントにバインドする必要がある場合、コードロジックを変更する場所は1つだけになります。

4
Giorgi

resizeイベントを使用します。

これは動作するはずです：

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