如何用TailwindCSS实现带粘性导航栏的全屏内容布局？

问题核心：粘性导航栏（高度h-20）加上使用h-screen的内容区域会导致总高度超出视口，产生不必要的垂直滚动条。需要让内容区域精准占据视口高度减去导航栏高度的剩余空间，同时不影响后续区块的任意高度设置。

解决方案1：使用calc()直接计算高度 #

Tailwind支持直接在类名中使用calc()表达式，针对导航栏高度h-20（对应80px，Tailwind默认间距系统中1rem=16px，h-20=20*0.25rem*16px=80px），将内容区域的h-screen替换为h-[calc(100vh-80px)]，同时添加min-h-[calc(100vh-80px)]确保内容不足时也能占满剩余视口空间。

修改后的完整代码：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <!-- 粘性导航栏 -->
  <div class="h-20 text-5xl sticky top-0 text-center bg-slate-300/50">
      Menu
  </div>
  <!-- 占据视口剩余空间的居中内容区域 -->
  <div class="h-[calc(100vh-80px)] min-h-[calc(100vh-80px)] mx-auto bg-indigo-300 flex flex-col justify-center items-center text-5xl">
      content
  </div>
  <!-- 高度可变的区块 -->
  <div class="h-80 mx-auto bg-green-300 flex flex-col justify-center items-center text-5xl">
      content
  </div>
  <!-- 页脚 -->
  <div class="h-20 mx-auto bg-black text-white flex flex-col justify-center items-center text-5xl">
      footer 
  </div>
</body>
</html>

解决方案2：自定义Tailwind工具类（更灵活） #

如果需要复用这个高度计算，可以通过Tailwind的自定义配置添加工具类（适合非CDN场景，或通过CDN的tailwind.config配置）：

tailwind.config = {
  theme: {
    extend: {
      height: {
        'screen-minus-nav': 'calc(100vh - 80px)',
      },
      minHeight: {
        'screen-minus-nav': 'calc(100vh - 80px)',
      },
    },
  }
}

之后内容区域就可以直接使用h-screen-minus-nav min-h-screen-minus-nav类，代码更简洁：

<div class="h-screen-minus-nav min-h-screen-minus-nav mx-auto bg-indigo-300 flex flex-col justify-center items-center text-5xl">
    content
</div>

关键说明 #

• 粘性导航栏的sticky top-0属性会让导航栏在滚动时固定在视口顶部，不影响后续区块的布局流。
• 使用calc(100vh - 80px)确保内容区域刚好填满导航栏下方的剩余视口空间，初始加载时不会出现垂直滚动条，滚动后可正常查看后续区块。
• 保留min-h-*类是为了防止内容区域内容过少时，高度不足以填满剩余视口的情况。

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