【javascript】window.innerHeightってどこの高さ?

Date:

Share post:

コーディングする時、特にレスポンシブサイトなどでは、
何かと動的に高さを調整したくなる時があるかと思います。

毎回「どのプロパティ使えば、どこの高さが取得できるんだっけ?」と
混乱していたのでまとめてみました。

  • screen.height = スクリーンの高さ(ディスプレイ全体)
  • screen.availHeight = スクリーンの有効領域の高さ
  • window.outerHeight = ブラウザ全体の高さ
  • window.innerHeight = ブラウザの内側の高さ(ページが表示される高さ)
  • document.documentElement.clientHeight = ページが表示される高さ

下のリンクボタンをクリックで
実際に取得した値を表示します。

特にスマホでは、アドレスバーの表示/非表示で
値が変わってくるので色々試してみてください。

DEMO

高さ

screen.height = 0

screen.availHeight = 0

window.outerHeight = 0

window.innerHeight = 0

document.documentElement.clientHeight = 0

簡単ですがscriptはこちら

<script>
	const height = document.getElementById('getHeight');
	height.addEventListener('click', function(){
		const screenHeight = screen.height;
		const screenAvailHeight = screen.availHeight;
		const windowOuterHeight = window.outerHeight;
		const windowInnerHeight = window.innerHeight;
		const docClientHeight = document.documentElement.clientHeight;
		document.getElementById('01').innerHTML = screenHeight;
		document.getElementById('02').innerHTML = screenAvailHeight;
		document.getElementById('03').innerHTML = windowOuterHeight;
		document.getElementById('04').innerHTML = windowInnerHeight;
		document.getElementById('05').innerHTML = docClientHeight;
	});
</script>

他にも色々取得方法ありそうなので、試してみたいです。

Related articles

ラベル画像のエンベディング

前回の投稿(ラベル画像の切り出し)で...

ラベル画像の切り出し

前回の投稿(Mac+PostgreS...

フロント担当のTIL 2025/06

「Today I Learned(今日学んだこと)」を記録するTIL、6月は新マシンが納品され、GPU仮想化からローカルLLM環境の構築まで、いろいろ試行錯誤しました。

Mac+PostgreSQLでベクトル検索

前回の投稿で予告したように、今回から...