div要素の高さheightをウィンドウサイズのリサイズ高さに自動的に合わせる方法

cssだと、div要素の横幅widthは%で自動的に調整してくれるのに、高さだけは中身の要素が高さを持っていたり、そもそものdiv要素自体にheightの値がないと調整してくれません。

min-heightなどで、最低の高さを与えておくなどの手段もありますが、できれば、ウィンドウサイズに合わせて動的に調整したいと思います。

なので、div要素に対して、高さを自動的に持たせたい時はjs、jqueryに頼る必要があります。

div要素の高さheightをウィンドウサイズのリサイズ高さに自動的に合わせる

というわけで、ソースコードは下記の通り。

$(function() {

  //ウィンドウ幅の高さをw_heightに取得
  var w_height = window.innerHeight;

  //要素HTML_IDをdiv_targetに取得
  var div_target = document.getElementById("HTML_ID");

  //div_targetの高さをw_heightに書き換え
  div_target.style.height = w_height + 'px';

  //イベントハンドラでウィンドウリサイズ時の記述
  $(window).resize(function() {

    //ウィンドウ幅の高さをw_heightに取得
    var w_height = window.innerHeight;

    //要素HTML_IDをdiv_targetに取得
    var div_target = document.getElementById("HTML_ID");

    //div_targetの高さをw_heightに書き換え
    div_target.style.height = w_height + 'px';

  });
});

コメントに書いている通りですが、ウィンドウ高さを取得して、それを対象のdiv要素の高さにすればOKというだけのことです。

一点、上記の書き方だと、ウィンドウリサイズ時にずっと動作してしまいますので、ウィンドウリサイズが終了したところでウィンドウ高さを取得させたい場合には、setTimeout関数を利用してください。

setTimeout関数を用いたイベントハンドラの記述方法は、下記サイト様で詳細に分かりやすく説明されていますので、ぜひ参考にしてみてください。

▼[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する
https://kadoppe.com/archives/2012/02/jquery-window-resize-event.html