このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

min-height”プロパティ:最小の高さ

記事Dec. 3rd,2020
要素の高さの最大値を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 min-height: 0;
適用対象 width”プロパティheight”プロパティを適用できるすべての要素
継承 No
パーセント値 内包される包括ブロックの高さを“100%”とする
計算値 指定した値(ただし、<length-percentage>”値は算出された値)
アニメーション 計算値(fit-content()”関数に再帰)

min-height”プロパティは要素の高さ、垂直方向の大きさの最大値を指定するプロパティです。

height”プロパティの値が“min-height”プロパティの値を下回る場合は“min-height”プロパティの値が高さになります。“min-height”プロパティの値がmax-height”プロパティの値よりも大きい場合は“min-height”プロパティが優先されます。

min-height”プロパティは既定ではコンテント・ボックスの高さを指定します。“min-height”プロパティで指定した高さをボーダー・ボックスの高さとしたい場合はbox-sizing: border-box;を適用します。

CSSのボックスモデル

サンプルコード

div { min-height: 100px;}

説明
キーワード値
auto 要素の既定のレイアウト方法に合わせてユーザー・エージェントが高さを計算します (他で定義されていなければ“0”となります。)
min-contentCSS Box Sizing Module Level 3 で追加 【横書きの場合】要素の既定のレイアウト方法に合わせてユーザー・エージェントが高さを計算します
【縦書きの場合】コンテンツをはみ出さずに内包できる最小の高さ (許容される箇所ですべて折り返した時にコンテンツを内包できる最小の高さ)
max-contentCSS Box Sizing Module Level 3 で追加 【横書きの場合】要素の既定のレイアウト方法に合わせてユーザー・エージェントが高さを計算します
【縦書きの場合】要素の理想的な高さ (コンテンツを折り返さずに内包できる最小の高さ)
stretchCSS Box Sizing Module Level 4 で追加 マージン・ボックスの高さが使用可能な領域の高さをすべて占有するように高さを計算 (左右のマージンは折りたたまれず、“auto”の場合は“0”として扱われます。)
fit-contentCSS Box Sizing Module Level 4 で追加 min-content”と“stretch”のうちの大きい方と“max-content”を比べた時の小さい方の値と同じ
containCSS Box Sizing Module Level 4 で追加 アスペクト比が指定されていればその制約の中でマージン・ボックスの高さが使用可能な領域の高さをできる限り占有するように高さを計算 (アスペクト比が指定されていなければ“stretch”と同じです。)
<length-percentage>”値
<length> pxvhなどで高さを指定
<percentage> 内包される包括ブロックの高さを“100%”として高さを指定
他の値
fit-content()CSS Box Sizing Module Level 3 で追加 fit-content()”関数で高さを指定
共通キーワード

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 作業草稿(WD) 作業草稿(WD)
min-height
定義あり

定義あり

定義あり

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 作業草稿(WD) 作業草稿(WD)
<length>
定義あり

定義あり

定義あり

定義あり
<percentage>
定義あり

定義あり

定義あり

定義あり
auto
定義あり

定義あり

定義あり

定義あり
min-content
定義なし

定義なし

定義あり

定義あり
max-content
定義なし

定義なし

定義あり

定義あり
fit-content()
定義なし

定義なし

定義あり

定義あり
stretch
定義なし

定義なし

定義なし

定義あり
fit-content
定義なし

定義なし

定義なし

定義あり
contain
定義なし

定義なし

定義なし

定義あり

使用例

デフォルトの高さ

div {
resize: both;
overflow: hidden;
min-height: auto;
writing-mode: horizontal-tb;
}
In spring, dawn is the most beautiful moment.

高さを内容に合わせる

横書きの場合

div {
resize: both;
overflow: hidden;
min-height: min-content;
writing-mode: horizontal-tb;
}
In spring, dawn is the most beautiful moment.
div {
resize: both;
overflow: hidden;
min-height: max-content;
writing-mode: horizontal-tb;
}
In spring, dawn is the most beautiful moment.

縦書きの場合

div {
resize: both;
overflow: hidden;
min-height: min-content;
writing-mode: vertical-rl;
}
In spring, dawn is the most beautiful moment.
div {
resize: both;
overflow: hidden;
min-height: max-content;
writing-mode: vertical-rl;
}
In spring, dawn is the most beautiful moment.

高さを内包される領域に合わせる

div {
resize: both;
margin: 10px;
width: stretch;
}
In spring, dawn is the most beautiful moment.
div {
resize: both;
margin: 10px;
min-height: fit-content;
}
In spring, dawn is the most beautiful moment.
div {
resize: both;
aspect-ratio: 1/1;
margin: 10px;
min-height: contain;
}
In spring, dawn is the most beautiful moment.

<length>”値で指定する

div {
resize: both;
overflow: hidden;
min-height: 100px;
}
In spring, dawn is the most beautiful moment.

<percentage>”値で指定する

div {
resize: both;
overflow: hidden;
min-height: 50%;
}
In spring, dawn is the most beautiful moment.

fit-content”関数で指定する

div { min-height: fit-content(200px);}
In spring, dawn is the most beautiful moment.
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク