Tailwind 如何修复侧边栏？

Posted 2023-03-07

【中文标题】Tailwind 如何修复侧边栏？

【英文标题】：Tailwind how to a fix sidebar?

【发布时间】：2021-12-12 12:06:57

【问题描述】：

我在 Better Dev 频道上关注 chris sev 的 tutorial。

这里是教程的codepen。

我想固定这个侧边栏并避免滚动。现在，如果我放置内容，侧边栏也会随着内容滚动。

我已经在 sidebar 类的 div 上尝试了 fixed top-0 和 sticky top-0。

这一切似乎都没有。有人知道如何固定侧边栏吗？

【问题讨论】：

play.tailwindcss.com/x23AbgvIWu -- 将md:relative 替换为md:fixed

【参考方案1】：

您的示例的主要问题是 flex 的错误使用以及您如何实现它。

这是您的codepen 链接的干净版本（没有移动版本，我会让您处理它；）

简而言之，您需要确保 FLEX 主应用程序将使用完整的窗口大小：

<div id="app" class="fixed flex w-full h-full ...">

设置主应用后，您只需让子应用适应您的需求：

<div id="sidebar" class="w-64 ...">

如您所见，您只需要设置“静态”元素的宽度（需要始终保持不变的元素） 动态元素——内容容器——将具有更大的灵活性，因此我们应用.flex-1：

  <div id="content" class="flex-1 overflow-auto ...">

这实际上与顺风无关，而是与display: flex; 本身有关。

（PS：我已经编辑所以你只能看到重要的类）