JavaScriptのscreen.availHeightとは？有効表示領域の高さを取得する方法を解説
screen.availHeight は、モニタの表示領域からタスクバーやメニューバーなどを除いた「実際に利用できる高さ」を取得するためのプロパティです。
画面レイアウトを最適化したいときに役立ちます。
availHeightプロパティとは？
screen.availHeight は、モニタの有効領域（実際に使用可能な高さ）をピクセル単位で返します。
- タスクバー・メニューバーなどを除いた高さ
- ブラウザ最大化時に実際に使える高さ
screen.height（モニタ全体の高さ）とは異なる点に注意しましょう。
使用例：有効領域の高さを取得して表示する
以下は、ページ読み込み時に availHeight を取得し、フォームに表示するサンプルです。
<html>
<head>
<title>JavaScript Sample</title>
<script>
function formInitialize() {
// モニタの有効な領域の高さを表示
document.getElementById(“avail”).value = screen.availHeight;
}
</script>
</head>
<head>
<title>JavaScript Sample</title>
<script>
function formInitialize() {
// モニタの有効な領域の高さを表示
document.getElementById(“avail”).value = screen.availHeight;
}
</script>
</head>
<body onload=”formInitialize()”>
<p><b>モニタの有効領域が表示されます。</b></p>
<form>
<p>モニタの有効な領域の高さは <input type=”text” id=”avail” size=”8″> ピクセルです。</p>
</form>
</body>
</html>
→ 読み込み時に自動で有効領域の高さが表示されます。
availHeight の用途
- 画面レイアウトの最適化
- ウィンドウサイズに応じた動的デザイン
- ユーザー環境に合わせた UI 調整
関連プロパティ
screen.height：モニタ全体の高さscreen.availWidth：有効領域の幅
まとめ
screen.availHeightは「実際に利用できる画面の高さ」を返す- タスクバーなどを除いた値が取得できる
- 画面レイアウト調整に役立つ
