min-height

例

基本的な例

min-h-<number> ユーティリティ（min-h-24 や min-h-64 など）を使用して、要素の間隔スケールに基づいた固定最小高さを設定します。

<div class="h-20 ...">
  <div class="min-h-80 ...">min-h-80</div>
  <div class="min-h-64 ...">min-h-64</div>
  <div class="min-h-48 ...">min-h-48</div>
  <div class="min-h-40 ...">min-h-40</div>
  <div class="min-h-32 ...">min-h-32</div>
  <div class="min-h-24 ...">min-h-24</div>
</div>

パーセンテージの使用

min-h-full または min-h-<fraction> ユーティリティ（min-h-1/2 や min-h-2/5 など）を使用して、要素にパーセンテージベースの最小高さを与えます。

<div class="min-h-full ...">min-h-full</div>
<div class="min-h-9/10 ...">min-h-9/10</div>
<div class="min-h-3/4 ...">min-h-3/4</div>
<div class="min-h-1/2 ...">min-h-1/2</div>
<div class="min-h-1/3 ...">min-h-1/3</div>

カスタム値の使用

以下を使用してください min-h-[<value>] 構文 を設定するには最小の高さ完全にカスタムの値に基づいて

<div class="min-h-[220px] ...">
  <!-- ... -->
</div>

CSS変数の場合、以下も使用できます min-h-(<custom-property>) 構文

<div class="min-h-(--my-min-height) ...">
  <!-- ... -->
</div>

これは単なる省略形です min-h-[var(<custom-property>)] これは `var()` 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa min-height ユーティリティ md: のようなブレークポイントバリアントを付けて、ユーティリティを適用するのはmedium 以上の画面サイズのみにします

<div class="h-24 min-h-0 md:min-h-full ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。

テーマのカスタマイズ

The min-h-<number> ユーティリティは、--spacing テーマ変数によって駆動され、これは独自のテーマでカスタマイズできます

@theme {
  --spacing: 1px; 
}

間隔スケールのカスタマイズの詳細については、テーマ変数のドキュメントを参照してください。