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
は、テキストを大きくするためにページを拡大したとき、切り捨てたられたり他のコンテンツを邪魔したりしないように設定するよう確認してください。
公式定義
初期値 | auto |
---|---|
適用対象 | 非置換インライン要素、テーブルの列、列グループを除くすべての要素 |
継承 | なし |
パーセント値 | パーセント値は、生成ボックスの包含ブロックの高さを基準に計算されます。 包含ブロックの高さが明示的に定義されず (すなわち、コンテンツの高さに依存します)、この要素が絶対位置指定されていない場合は、値は auto になります。ルート要素で高さをパーセント値で指定すると、初期包含ブロックに対する相対値になります。 |
計算値 | パーセント値、 auto 、絶対的な長さのいずれか |
アニメーションの種類 | データ型の値は、実数すなわち浮動小数点数として補間されます。">length または の値は、実数の浮動小数点数として補間されます。">パーセント値, calc(); |
形式文法
例
ピクセル数とパーセント値を使用して高さを設定
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 with JavaScript enabled. Enable JavaScript to view data.
関連情報
- ボックスモデル
width
box-sizing
min-height
,max-height
- 対応する論理的プロパティ:
block-size
,inline-size