Tailwind CSS - 最小高度

上一頁
下一頁

Tailwind CSS 的 `min-height` 是一個實用程式類，提供了一種有效處理內容最小高度的方法。它用於設定或修改任何 HTML 元素的最小高度。

Tailwind CSS 最小高度類

以下是提供有效處理內容最小高度的 **Tailwind CSS 最小高度** 類列表。

類名 CSS 屬性
min-h-0 min-height: 0px;
min-h-1 min-height: 0.25rem; /* 4px */
min-h-2 min-height: 0.5rem; /* 8px */
min-h-3 min-height: 0.75rem; /* 12px */
min-h-4 min-height: 1rem; /* 16px */
min-h-5 min-height: 1.25rem; /* 20px */
min-h-6 min-height: 1.5rem; /* 24px */
min-h-7 min-height: 1.75rem; /* 28px */
min-h-8 min-height: 2rem; /* 32px */
min-h-9 min-height: 2.25rem; /* 36px */
min-h-10 min-height: 2.5rem; /* 40px */
min-h-11 min-height: 2.75rem; /* 44px */
min-h-12 min-height: 3rem; /* 48px */
min-h-14 min-height: 3.5rem; /* 56px */
min-h-16 min-height: 4rem; /* 64px */
min-h-20 min-height: 5rem; /* 80px */
min-h-24 min-height: 6rem; /* 96px */
min-h-28 min-height: 7rem; /* 112px */
min-h-32 min-height: 8rem; /* 128px */
min-h-36 min-height: 9rem; /* 144px */
min-h-40 min-height: 10rem; /* 160px */
min-h-44 min-height: 11rem; /* 176px */
min-h-48 min-height: 12rem; /* 192px */
min-h-52 min-height: 13rem; /* 208px */
min-h-56 min-height: 14rem; /* 224px */
min-h-60 min-height: 15rem; /* 240px */
min-h-64 min-height: 16rem; /* 256px */
min-h-72 min-height: 18rem; /* 288px */
min-h-80 min-height: 20rem; /* 320px */
min-h-96 min-height: 24rem; /* 384px */
min-h-px min-height: 1px;
min-h-0.5 min-height: 0.125rem; /* 2px */
min-h-1.5 min-height: 0.375rem; /* 6px */
min-h-2.5 min-height: 0.625rem; /* 10px */
min-h-3.5 min-height: 0.875rem; /* 14px */
min-h-full min-height: 100%;
min-h-screen min-height: 100vh;
min-h-svh min-height: 100svh;
min-h-lvh min-height: 100lvh;
min-h-dvh min-height: 100dvh;
min-h-min min-height: min-content;
min-h-max min-height: max-content;
min-h-fit min-height: fit-content;

Tailwind CSS 最小高度類的功能

  • min-h-*：此類用於設定任何元素的特定最小高度，* 代表一個數字，可以是上表中任何可接受的值。
  • min-h-px：此類將元素的最小高度設定為 1px。
  • min-h-auto：此類根據內容定義元素的最小高度。
  • min-h-1/2：這將最小高度設定為視窗高度的一半。
  • min-h-1/3：這將最小高度設定為視窗高度的三分之一。
  • min-h-1/4：這將最小高度設定為視窗高度的四分之一。
  • min-h-1/5：這將最小高度設定為視窗高度的五分之一。
  • min-h-1/6：這將最小高度設定為視窗高度的六分之一。
  • min-h-full：此類將最小高度設定為其最大可能高度。
  • min-h-screen：這將最小高度設定為螢幕尺寸。
  • min-h-svh：此類將元素的最小高度設定為 100 svh。
  • min-h-lvh：此類將元素的最小高度設定為 100 lvh。
  • min-h-dvh：此類將元素的最小高度設定為 100 dvh。
  • min-h-min：此類用於指定最小高度的最小值。
  • min-h-max：此類用於指定最小高度的最大值。
  • min-h-fit：此類將最小高度設定為適應內容以填充父元素。

Tailwind CSS 最小高度類示例

以下示例將演示 Tailwind CSS 最小高度類實用程式。

設定最小高度

我們多次使用過 CSS 的 minimum-height 屬性，在這裡我們也可以使用上述類來實現這一點。

示例

在此示例中，我們將建立四個元素，並使用上述類設定不同的最小高度。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-2">
        Tailwind CSS Minimum Height Class
    </h2>
    <div class="flex">
        <div class="h-64 bg-green-200 p-2 text-center w-fit "> 
            <div class="min-h-full w-20 bg-green-400">
                min-h-full
            </div> 
        </div> 
        <div class="h-64 bg-green-200 p-2 text-center w-fit"> 
            <div class="min-h-8 w-20 bg-green-400">
                min-h-8
            </div> 
        </div> 
        <div class="h-64 bg-green-200 p-2 text-center w-fit"> 
            <div class="min-h-24 w-20 bg-green-400">
                min-h-24
            </div> 
        </div>
        <div class="h-64 bg-green-200 p-2 text-center w-fit"> 
            <div class="min-h-48 w-20 bg-green-400">
                min-h-48
            </div> 
        </div>
    </div>
</body>

</html>

條件最小高度

我們可以根據懸停、焦點或螢幕尺寸等條件更改最小高度值。要在任何元素的最小高度上設定條件，我們可以使用`hover`和`focus`類。

示例

在以下示例中，我們將滑鼠懸停在元素上時更改最小高度值。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-2">
        Tailwind CSS Minimum Height Class
    </h2>
    <div class="flex">
        <div class="h-64 bg-green-200 p-2 text-center w-fit "> 
            <div class="min-h-full w-20 bg-green-400">
                min-h-full
            </div> 
        </div> 
        <div class="h-64 bg-green-200 p-2 text-center w-fit"> 
            <div class="min-h-8 hover:min-h-16 w-20 bg-green-400">
                Hover
            </div> 
        </div> 
        <div class="h-64 bg-green-200 p-2 text-center w-fit"> 
            <div class="min-h-24 hover:min-h-16 w-20 bg-green-400">
                Hover
            </div> 
        </div>
        <div class="h-64 bg-green-200 p-2 text-center w-fit"> 
            <div class="min-h-48 hover:min-h-16 w-20 bg-green-400">
                Hover
            </div> 
        </div>
    </div>
</body>

</html>
列印頁面
上一頁
下一頁
廣告