CSS - min-height
概要
属性名 | min-height |
---|---|
値 | <length> | <percentage> | none | min-content | max-content | fit-content |
初期値 | none |
適用可能要素 | すべての要素 |
継承 | 継承しない |
メディア | visual |
サポート |
https://caniuse.com/mdn-css_properties_min-height https://caniuse.com/intrinsic-width |
説明
最小の高さを指定します。
- <length>
- 高さを 10px 1.5em などの長さの単位で指定します。
- <percentage>
- 高さを 10% など、要素の大きさに対するパーセントで指定します。
- none
- 最小の高さを指定しません。
- min-content
- コンテンツ中の最も長い単語の長さとなります。縦書きの場合に有効です。
- max-content
- コンテンツ中の文章が改行されない場合の長さとなります。縦書きの場合に有効です。
- fit-content
- コンテンツ中の文章が改行されない場合の長さとなります。ただし親要素の高さを超えることはありません。縦書きの場合に有効です。
使用例
最小限の高さが 120px でコンテンツサイズがそれを超えると自動的に大きくなります。
HTML
<table style="height:150px;"> <tr style="vertical-align:top"> <td> <div style="min-height:120px; border:1px solid #999999; width:100px;> あああああああああ </div> </td> <td> <div style="min-height:120px; border:1px solid #999999; width:100px;> ああああああああああああああああああああああ </div> </td> <td> <div style="min-height:120px; border:1px solid #999999; width:100px;> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> </td> </tr> </table>
表示
あああああああああ
|
ああああああああああああああああああああああ
|
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
|
詳細
td に min-height を指定する方法
何故か分かりませんがテーブルの td 要素には min-height を指定しても無視される仕様だそうです。td 要素に min-height を指定したい時は下記の様に指定するとよいそうです。
td::before { display: block; float: left; content: ""; min-height: 30px; }
関連項目
width, height, min-width, min-height, max-width, max-heightリンク
- http://www.w3.org/TR/CSS2/visudet.html#min-max-height
- http://www.w3.org/TR/css3-box/#min-max
- http://www.d-toybox.com/spec/CSS3/box/index.html#the-min-width
- https://developer.mozilla.org/ja/docs/Web/CSS/min-height
- http://caniuse.com/#feat=minmaxwh
Copyright (C) 1997-2025 杜甫々
初版:1997年7月27日、最終更新:2025年2月2日
https://www.tohoho-web.com/css/prop/min-height.htm