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>
打印页面
上一页
下一页
广告