Window.innerHeight

innerHeightWindow インターフェイスの読み取り専用プロパティで、ウィンドウの内部の高さをピクセル単位で返します。水平スクロールバーがあれば、その高さを含みます。

innerHeight の値はウィンドウのレイアウトビューポートの高さから取られます。幅は innerWidth プロパティを使用して取ることができます。

構文

let intViewportHeight = window.innerHeight;

整数値で、ウィンドウのレイアウトビューポートの高さをピクセル単位で示します。このプロパティは読み取り専用で、既定値はありません。

ウィンドウの幅を変更するには、 resizeTo()resizeBy() などの寸法変更メソッドの一つを呼び出してください。

使用上の注意

ウィンドウから水平スクロールバーや境界を引いた高さを取得するには、ルートの <html> 要素の clientHeight() プロパティを代わりに使用してください。

innerHeight および innerWidth はすべてのウィンドウと、ウィンドウのように動作するすべてのオブジェクト、例えばタブやフレームで利用できます。

フレームセットの想定

var intFrameHeight = window.innerHeight; // or

var intFrameHeight = self.innerHeight;
// フレームセット内にあるフレームのビューポートの高さを返します

var intFramesetHeight = parent.innerHeight;
// 最も近いフレームセットのビューポートの高さを返します

var intOuterFramesetHeight = top.innerHeight;
// もっとも外側のフレームセットのビューポートの高さを返します

FIXME: link to an interactive demo here

ウィンドウの寸法を変更するには、 window.resizeBy()window.resizeTo() を参照してください。

ウィンドウの外形の高さ、すなわちブラウザーウィンドウ全体の高さを取得するには、 window.outerHeight を参照してください。

以下の図は outerHeightinnerHeight の違いを示しています。

innerHeight vs outerHeight illustration

仕様書

仕様書 状態 備考
CSS Object Model (CSSOM) View Module
window.innerHeight の定義
草案 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報