プロパティ min-height

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

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

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

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

構文

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

例

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

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

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

Результат:

例

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

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

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

Результат:

例

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

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

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

Результат:

関連項目