| 属性名 | 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 |
最小の高さを指定します。
最小限の高さが 120px でコンテンツサイズがそれを超えると自動的に大きくなります。
<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::before {
display: block;
float: left;
content: "";
min-height: 30px;
}