HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

マックス ハイト

max-heightプロパティ

要素の最大の高さを指定するプロパティです。

  • 初期値

    none

  • 継承

    不可

  • 適用できる要素

    テーブルの行を除く全要素

次の値を設定することができます。

  • none – 最大の高さを指定しない。初期値。
  • 数値 + 単位 – 任意の単位(pxem)で最大の高さを指定。
  • 数値 + % – 親要素に対する割合で最大の高さを指定。

パターン1

max-heightプロパティを「10px」、heightプロパティを「auto(初期値)」と指定した場合の例です。max-heightプロパティを指定している場合は要素の内容に関わらず10pxを最大の高さとして調整します。

CSSコード例

<style type="text/css">
.parent {
	height: 50px;
}
.box1 {
	height: auto;
	max-height: 10px;
}
</style>
<div class="parent">
	<p class="box1">max-heightプロパティのテスト</p>
</div>

表示例:

max-heightプロパティの指定例 パターン1

パターン2

max-heightプロパティを「20%」で指定した場合の例です。「20%」と指定した場合、親要素の高さ20%(今回の例では10px)を最大の高さとします。

CSSコード例

<style type="text/css">
.parent {
	height: 50px;
}
.box2 {
	height: auto;
	max-height: 20%;
}
</style>
<div class="parent">
	<p class="box2">widthプロパティのテスト</p>
</div>

表示例:

max-heightプロパティの指定例 パターン2

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。