要素の高さの最大値を設定する

CSS - max-height

概要

CSSプロパティ「max-height」は、要素の高さの最大値を設定することができます。設定することでその高さを超えることがなくなります。高さを固定したくないが、最大高さは保持したい場合に有用です。一方で、最小値を指定したい場合は min-height を使用し、更に横方向の最大、最小値は、min-width, max-width プロパティを使用します。

また height を同時に指定した場合は、height の値が 「max-height」 の値を上回ることはありません。

<p class="height">高さ120pxのボックス</p>
<p class="max-height">要素の高さが最大値未満</p>
<p class="max-height">要素の高さが最大値をこえた場合。ボックスの高さは最大値を超えません。</p>
<style>
* {
  margin: 0;
  padding: 0;
}
p {
  background-color: #ffe4e1;
  display: inline-block;
  width: 80px;
  float: left;
  margin: 10px;
}
.height {
  height: 120px;
}
.max-height {
  max-height: 120px;
}
</style>

上記の例を見てわかるように、指定した値をこえた部分の内容がはみ出てしまっています。このように領域からはみ出てしまった場合の処理を指定するCSSプロパティ overflow を組み合わせて使うことがあります。はみ出てしまった要素を非表示にするには 「hidden」 を指定します。後述の使用例を確認してみてください。

値の指定方法

{ max-height: キーワード, 値, パーセント }

実数値 + 以下のような単位で指定します。マイナス値は指定できませんので、注意しましょう。

説明
none初期値です。最大値の制限をしません。
px, em, %で指定。マイナス値は指定できません。

値の単位の詳細は以下の通りです。

単位説明
pxpxとは画面の1画素(ピクセル)のサイズを1とする単位です。実際に表示されるサイズはモニターの解像度により変化します。
em親要素を起点とする文字の高さを1とする単位です。1emは1文字分となります。
%親要素の幅を基準に割合を%値で指定した単位です。

使用例

指定した高さを超えた場合に、はみ出た要素を非表示にする実装例です。

<p class="height">高さ120pxのボックス</p>
<p class="max-height">要素の高さが最大値をこえた場合。ボックスの高さは最大値を超えません。</p>
<style>
* {
  margin: 0;
  padding: 0;
}
p {
  background-color: #ffe4e1;
  display: inline-block;
  width: 80px;
  float: left;
  margin: 10px;
}
.height {
  height: 120px;
}
.max-height {
  max-height: 120px;
  overflow: hidden;
}
</style>

 

仕様書

関連CSSプロパティ