[JS]ウィンドウの高さを取得して要素の高さを100%にする方法｜Javascriptスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[JS]ウィンドウの高さを取得して要素の高さを100%にする方法

スポンサード

jQuery でウィンドウの高さを取得して、特定の要素の高さを常に100%にする方法のご紹介です。

ウィンドウの高さを取得して高さを調整

今回は例として#container という要素の高さを100%にしてみます。

<head>タグ内で、jqueryファイルと一緒に以下のJavascript の記述を追加します。

<script src="./jquery.min.js"></script>
<script>
$(document).ready(function(){
  hsize = $(window).height();
  $("#container").css("height", hsize + "px");
});
$(window).resize(function () {
  hsize = $(window).height();
  $("#container").css("height", hsize + "px");
});
</script>