プロパティ min-height

プロパティ min-height は、要素の最小高さを設定します。このプロパティの値には、任意のサイズ単位、または値がないことを意味するキーワード none を指定できます。

通常、幅が可変の要素（高さがパーセントで指定されているか、まったく指定されておらず、要素の高さが内容に応じて拡張されるもの）に対して設定されます。

最小高さが設定されている場合、要素はそれよりも小さくなることはありません。 min-height に必要なテキスト量よりも少ない場合、要素の高さは min-height になります。

テキストがそれよりも多い場合は、テキストの量に応じて要素の高さが計算されます。

構文

セレクタ {
	min-height: 値;
}

この例では、高さはまったく設定されておらず、テキストの量に応じてブラウザが自動的に計算します。しかし、プロパティ min-height が設定されているため、たとえその中にテキストがまったくなくても、高さはこの値より小さくはなりません：

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
}

要素にもっとテキストを追加して、ブロックの高さがオーバーフローするようにしてみましょう。この場合、私たちのブロックは単に高さを増加させます：

<div id="elem">
	some long text
</div>

#elem {
	min-height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

比較のために、最小高さを取り除き、代わりにプロパティ height を設定した場合、ブロックがどうなるか見てみましょう：

<div id="elem">
	some long text
</div>

#elem {
	height: 100px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
	margin-bottom: 50px;
}