min-height/最小の高さ

min-heightプロパティは最小の高さを指定出来ます。

説明

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

min-height説明(高さに満たない場合)

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

min-height説明(高さを越える場合)

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

構文

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

min-height: 最小の高さ;

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

【min-heightでの最小の高さの指定】
説明
px ピクセル指定
em 文字の大きさに対する割合
% 親ボックスの幅に対する割合

min-height利用例

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

div {
min-height: 50px;
}

<div>1行目 </div>

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

1行目

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

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

1行目
2行目
3行目
4行目
5行目

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

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

<div>あいう</div>

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

あいう

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

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

div {
min-height: 120%;
}

<div>min-height例</div>

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

min-height例

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

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

div {
min-height: 80%;
}

.t1 {
min-height: 0;
}

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

留意点

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

関連ページ

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

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

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

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

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)