height

Baseline

広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

完全な互換性情報を見る
もっと詳しく

height は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。box-sizing が border-box に設定されていた場合は、境界領域の高さを定義します。

試してみましょう

height: 150px;

height: 6em;

height: 75%;

height: auto;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    これは高さが変更できるボックスです。
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  justify-content: center;
  color: white;
}

min-height および max-height プロパティは height を上書きします。

メモ: 幾何プロパティとして、 height プロパティは、<svg>、<rect>、<image>、<foreignObject> の各 SVG 要素にも適用されます。 auto は 0 に、パーセント値は <rect> の場合は SVG ビューポートの高さに対する相対値に解決します。 CSS の height プロパティ値は、 SVG 要素に設定された height 属性値を上書きします。

構文

css

/* <length> 値 */
height: 120px;
height: 10em;
height: 100vh;
height: anchor-size(height);
height: anchor-size(--my-anchor self-block, 250px);
height: clamp(200px, anchor-size(width));

/* <percentage> 値 */
height: 75%;

/* キーワード値 */
height: max-content;
height: min-content;
height: fit-content;
height: fit-content(20em);
height: auto;
height: stretch;

/* グローバル値 */
height: inherit;
height: initial;
height: revert;
height: revert-layer;
height: unset;

値

<length>: 絶対値で高さを定義します。
<percentage>: 包含ブロックの高さのパーセント値で高さを定義します。
auto: 指定された要素の高さをブラウザーが計算して決めます。
max-content: 本来の望ましい高さです。
min-content: 本来の最小の高さです。
fit-content: 利用できる空間を使用しますが、 max-content を超えないようにします。すなわち、 min(max-content, max(min-content, stretch)) です。
fit-content(<length-percentage>): 利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, <length-percentage>)) です。
stretch: 要素のマージンボックスの高さを、包含ブロックの高さに設定します。マージンボックスが包含ブロック内で利用できる空間をすべて満たそうとするため、 100% と似たような動作をしますが、結果として得られるサイズは box-sizing で決定されるボックスではなく、マージンボックスに適用されます。

アクセシビリティ

要素の height は、テキストを大きくするためにページを拡大したとき、切り捨てたられたり他のコンテンツを邪魔したりしないように設定するよう確認してください。