【jQuery】画面の高さを取得する方法（メモ）

WordPressで特定のサイドバーへ項目（今回の場合は自動生成される目次）を入れて、それが画面の高さよりも大きかった時に自動で縦スクロールバーを表示させたいなぁと思った時のこと。

要素に自動でスクロールバーを表示させるには、CSSで以下のように書けば効きます。

overflow:auto;

ただこれはその要素の高さが決まっている場合の話で、高さが決まっていなかったり、100%、100VHなどでは効きません。

そこで見つけたのがjQurryを使った方法。

参考：画面サイズに合わせて高さを指定する3つの方法

先人に感謝感謝！！

今後使う機会があると思うので自身のメモを兼ねてシェアしておきます。

jQuery(document).ready(function ($) {
  hsize = $(window).height();
  $("要素").css("height", hsize + "px");
});
jQuery(window).resize(function ($) {
  hsize = $(window).height();
  $("要素").css("height", hsize + "px");
});

要素の部分はid(#)でもclass(.)でも、特定のタグでも大丈夫です。

きちんと適用されると、画面を開いた時、画面の高さが変わった時に、その要素へインラインで高さの指定が出力されます（以下の赤字部分がインライン出力された箇所）。

<div id="toc" style="height: 348px;">

これで、高さが決まるので、overflow:auto;をCSSで指定すれば、要素が高さよりも大きければ自動でスクロールバーが表示されるようになります。

上記のコードはWordPressのjQueryライブラリを利用する場合ですので、ライブラリが読み込まれた後でコードを読み込むようにしないと動作しませんから気を付けてください（詳しい説明は割愛します）