当网格外存在粘性顶部导航时，如何让侧边栏填充剩余高度

要实现这个效果，核心是让网格容器占据导航栏下方的全部剩余页面高度，再给侧边栏设置高度填满容器并开启滚动，具体修改如下：

修改后的完整代码 #

<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<body class="h-screen flex flex-col">
  <nav class="bg-slate-500 sticky top-0 p-4">the navbar</nav>
  <div class="grid grid-cols-[fit-content(300px)_auto] grid-rows-1 flex-1">
    <div class="bg-red-600 min-w-[100px] h-full overflow-auto p-4">
      左侧侧边栏内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
      测试内容<br>
    </div>
    <div class="bg-yellow-600 p-4">main content</div>
  </div>
</body>

关键修改说明 #

• 给body添加flex flex-col：把页面改成垂直弹性布局，让导航和网格容器按垂直方向分配屏幕高度
• 给网格容器添加flex-1：让网格容器自动填充导航栏下方的所有剩余空间，确保侧边栏有足够高度可填充
• 给侧边栏添加h-full overflow-auto：
  • h-full让侧边栏高度和网格容器完全一致，填满剩余页面高度
  • overflow-auto当侧边栏内容超出容器高度时，自动显示垂直滚动条；内容较少时则正常填满高度

这样就能满足需求：导航始终固定在顶部，侧边栏无论内容多少都填满剩余高度，内容过多时可滚动查看。

内容的提问来源于stack exchange，提问作者me.at.coding