如何用TailwindCSS实现NavBar+SideBar固定、主区域可滚动布局？

要实现你描述的布局，核心是利用Tailwind的网格布局（Grid）配合定位、溢出控制类划分区域并固定元素，下面是完整的实现方案：

布局思路 #

1. 用全屏高度的网格容器划分区域：
   • 第一行：顶部导航栏（固定高度，占满所有列）
   • 第二行：分为两列，左侧是固定宽度的侧边栏，右侧是占满剩余空间的主内容区
2. 导航栏和侧边栏通过sticky定位固定在视口内，主内容区开启垂直滚动
3. 确保主内容区占据所有可用空间，同时不挤压导航和侧边栏

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Tailwind Fixed Layout</title>
</head>
<body class="m-0 p-0">
  <!-- 全局网格容器 -->
  <div class="h-screen grid grid-rows-[auto_1fr]">
    <!-- 顶部导航栏 -->
    <nav class="sticky top-0 bg-white shadow-md z-10 h-16 flex items-center px-4">
      <h1 class="text-xl font-bold">导航栏</h1>
    </nav>

    <!-- 第二行：侧边栏 + 主内容 -->
    <div class="grid grid-cols-[250px_1fr]">
      <!-- 侧边栏 -->
      <aside class="sticky top-16 bg-gray-50 border-r h-[calc(100vh-4rem)] p-4">
        <h2 class="text-lg font-semibold mb-4">侧边栏</h2>
        <ul class="space-y-2">
          <li><a href="#" class="block hover:text-blue-600">菜单1</a></li>
          <li><a href="#" class="block hover:text-blue-600">菜单2</a></li>
          <li><a href="#" class="block hover:text-blue-600">菜单3</a></li>
        </ul>
      </aside>

      <!-- 主内容区 -->
      <main class="overflow-y-auto p-6">
        <h2 class="text-xl font-bold mb-4">主内容区</h2>
        <!-- 填充大量内容测试滚动 -->
        <p class="mb-4">
          这里是主内容区域，只有这个区域会滚动。<br>
          重复内容测试：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p class="mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p class="mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p class="mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p class="mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p class="mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p class="mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </main>
    </div>
  </div>
</body>
</html>

关键类说明 #

• h-screen：让网格容器占满整个视口高度
• grid-rows-[auto_1fr]：第一行高度自适应导航栏内容，第二行占满剩余高度
• grid-cols-[250px_1fr]：侧边栏固定宽度250px，主内容区占满剩余宽度
• sticky top-0：导航栏固定在视口顶部
• sticky top-16：侧边栏固定在导航栏下方（top-16对应导航栏的h-16高度）
• h-[calc(100vh-4rem)]：侧边栏高度为视口高度减去导航栏高度（4rem = 16px*4）
• overflow-y-auto：主内容区开启垂直滚动，内容超出时显示滚动条
• z-10：确保导航栏在其他内容上方，避免被覆盖

自定义调整 #

• 侧边栏宽度：修改grid-cols-[250px_1fr]中的250px为你需要的宽度（比如1/5、300px）
• 导航栏高度：修改h-16为其他高度（比如h-20），同时同步修改侧边栏的top-16和h-[calc(100vh-4rem)]中的4rem（1rem=16px，h-16对应4rem）
• 配色和样式：根据需求调整bg-white、shadow-md等类来修改外观

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