min-height/最小の高さ

説明

　min-heightは最小の高さを固定値や相対値等を使って設定出来ます。記述した文字や画像が設定した高さに満たなくても設定した高さを確保します。

　設定した高さを越える場合は必要な高さ分高さが確保されます。

　このため、親ボックス等で高さを指定しているとはみ出して表示される可能性があります。

構文

　heightプロパティの構文は以下の通りです。

min-height: 最小の高さ;

　最小の高さの指定は以下が出来ます。

min-height利用例

　heightの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
min-height: 50px;
}

<div>1行目 </div>

　上記を表示すると以下になります。尚、分かり易さのため、背景を付けています。

　最低限の高さとして50px確保します。

　以下のように必要な高さが50pxを越える場合は50px以上の高さになります。

　em指定の例は以下の通りです。分かり易いようにwidthやline-heightも指定しています。

div {
width: 1em;
min-height: 5em;
line-height:100%;
}

<div>あいう</div>

　上記を表示すると以下になります。

　最低限の高さとして5文字分の高さが取られます。

　%指定の例は以下の通りです。

div {
min-height: 120%;
}

<div>min-height例</div>

　上記を表示すると以下になります。

　点線の枠で高さを50pxに指定しており、その120%の高さを最低限確保するため高さが枠からはみ出しています。

　0を指定すると他で指定したmin-heigthを打ち消せます。

div {
min-height: 80%;
}

.t1 {
min-height: 0;
}

<div class="t1">min-height例</div>

留意点

　<span>タグ等のインラインボックスは必要な高さしか取らないため、指定しても無視されます。

関連ページ

・ホームページ作成「スタイルシートの定義方法」

　外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る