CSSheight メディア特性は、ビューポートの高さ (又はページ付きメディアのページボックスの高さ) に基づいてスタイルを適用するために使用することができます。

構文

height 特性は、ビューポートの高さを表す <length> 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた min-height 及び max-height の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。

HTML

<div>ビューポートの高さを変更しながら、この要素を見ていてください。</div>

CSS

/* 正確な高さ */
@media (height: 360px) {
  div {
    color: red;
  }
}

/* 最小高 */
@media (min-height: 25rem) {
  div {
    background: yellow;
  }
}

/* 最大高 */
@media (max-height: 40rem) {
  div {
    border: 2px solid blue;
  }
}

結果

仕様書

仕様書 状態 備考
Media Queries Level 4
height の定義
勧告候補 値に負の数を取ることができるようになり、この場合は false と計算されます。
Media Queries
height の定義
勧告 初回定義。値は非負でなければなりませんでした。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
height media featureChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 2IE 完全対応 9Opera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,