height
height
は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。box-sizing
が border-box
に設定されていた場合は、 境界領域の高さを定義します。
試してみましょう
min-height
および max-height
プロパティは height
を上書きします。
構文
css
/* <length> 値 */
height: 120px;
height: 10em;
/* <percentage> 値 */
height: 75%;
/* キーワード値 */
height: max-content;
height: min-content;
height: fit-content(20em);
height: auto;
/* グローバル値 */
height: inherit;
height: initial;
height: revert;
height: unset;
値
<length>
-
絶対値で高さを定義します。
<percentage>
-
包含ブロックの高さのパーセントで高さを定義します。
auto
-
指定された要素の高さをブラウザーが計算して決めます。
max-content
-
本来の望ましい高さです。
min-content
-
本来の最小の高さです。
fit-content(
<length-percentage>
)-
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち
min(max-content, max(min-content, <length-percentage>))
です。
アクセシビリティの考慮
要素の height
は、テキストを大きくするためにページを拡大したとき、切り捨てたられたり他のコンテンツを邪魔したりしないように設定するよう確認してください。
公式定義
形式文法
height =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> )
<length-percentage> =
<length> |
<percentage>
例
ピクセル数とパーセント値を使用して高さを設定
HTML
html
<div id="taller">I'm 50 pixels tall.</div>
<div id="shorter">I'm 25 pixels tall.</div>
<div id="parent">
<div id="child">I'm half the height of my parent.</div>
</div>
CSS
css
div {
width: 250px;
margin-bottom: 5px;
border: 2px solid blue;
}
#taller {
height: 50px;
}
#shorter {
height: 25px;
}
#parent {
height: 100px;
}
#child {
height: 50%;
width: 75%;
}
結果
仕様書
Specification |
---|
CSS Box Sizing Module Level 3 # preferred-size-properties |
CSS Box Sizing Module Level 4 # sizing-values |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- ボックスモデル
width
box-sizing
min-height
,max-height
- 対応する論理的プロパティ:
block-size
,inline-size