如何用Tailwind实现Banner占屏幕高度75%且不被裁剪

核心方案 #

• 用Tailwind自定义数值类直接绑定视口高度：h-[75vh]，vh是视口高度单位，75vh就代表屏幕高度的75%，完美解决固定高度类的局限。
• 若要避免导航栏遮挡：给导航栏设置固定高度的CSS变量，再通过calc计算Banner高度，确保内容不被导航栏覆盖。

修改后的基础版代码 #

<!DOCTYPE html>
<html lang="en" class="dark">
  <head>
    <link href="/public/output.css" rel="stylesheet" />
    <title>Tailwind</title>
  </head>
  <body>
  <nav>
  The Navbar
  </nav>

 <!-- Banner -->
    <div class="bg-cover bg-center bg-no-repeat h-[75vh]" style="background-image: url('https://source.unsplash.com/1280x614/?nature');">
    </div>
</body>
</html>

修改后的避导航栏版代码 #

如果导航栏有固定高度，不想让Banner被遮挡，可使用以下写法：

<!DOCTYPE html>
<html lang="en" class="dark">
  <head>
    <link href="/public/output.css" rel="stylesheet" />
    <title>Tailwind</title>
    <style>
      nav {
        --nav-height: 4rem; /* 替换为你导航栏的实际高度 */
        height: var(--nav-height);
      }
    </style>
  </head>
  <body>
  <nav>
  The Navbar
  </nav>

 <!-- Banner -->
    <div class="bg-cover bg-center bg-no-repeat h-[calc(75vh-var(--nav-height))]" style="background-image: url('https://source.unsplash.com/1280x614/?nature');">
    </div>
</body>
</html>

说明 #

• h-[75vh]：直接关联视口高度，无论屏幕尺寸如何，Banner始终占屏幕高度的75%，不会出现裁剪或高度不足的问题。
• calc(75vh - var(--nav-height))：通过CSS变量动态扣除导航栏高度，保证Banner的有效显示高度为屏幕的75%，同时避免和导航栏重叠。

内容的提问来源于stack exchange，提问作者henrydoe