CSS - max-height

概要

属性名 max-height
値 <length> | <percentage> | none | min-content | max-content | fit-content
初期値none
適用可能要素すべての要素
継承継承しない
メディアvisual
サポート https://caniuse.com/mdn-css_properties_max-height
https://caniuse.com/intrinsic-width

説明

要素の最大の高さを指定します。

値説明
<length>高さを 10px 1.5em などの長さの単位で指定します。
<percentage>高さを 10% など、要素の大きさに対するパーセントで指定します。
none高さを制限しません。
min-contentコンテンツ中の最も長い単語の長さとなります。縦書きの場合に有効です。
max-contentコンテンツ中の文章が改行されない場合の長さとなります。縦書きの場合に有効です。
fit-contentコンテンツ中の文章が改行されない場合の長さとなります。ただし親要素の高さを超えることはありません。縦書きの場合に有効です。
stretchコンテンツ周りのマージンを含めて親コンテンツサイズの 100% となります。詳細は width の使用例を参照してください。

使用例

HTML
<table style="height:150px;">
 <tr style="vertical-align:top">
  <td>
   <div style="max-height:120px; border:1px solid #999999; width:100px; overflow-y:scroll">
    あああああああああ
   </div>
  </td>
  <td>
   <div style="max-height:120px; border:1px solid #999999; width:100px; overflow-y:scroll">
    ああああああああああああああああああああああ
   </div>
  </td>
  <td>
   <div style="max-height:120px; border:1px solid #999999; width:100px; overflow-y:scroll">
    あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
   </div>
  </td>
 </tr>
</table>
表示
あああああああああ
ああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

関連項目

width, height, min-width, min-height, max-width, max-height

リンク

Copyright (C) 1997-2025 杜甫々
初版：1997年7月27日、最終更新：2025年7月6日
https://www.tohoho-web.com/css/prop/max-height.htm