Tailwind 网格动态侧边栏/导航栏宽度，主宽度为 100%

Posted 2023-03-06

【中文标题】Tailwind 网格动态侧边栏/导航栏宽度，主宽度为 100%

【英文标题】：Tailwind grid dynamic sidebar/navbar width with main 100% width

【发布时间】：2020-09-01 03:14:27

【问题描述】：

我需要一个 100% 满的简单主 div 列。

有时会出现一个侧边栏，具有动态宽度。

回复：https://codesandbox.io/s/tailwind-dynamic-sidebar-kw1ku

在此示例中，您可以看到我无法更改侧边栏宽度（每次都有一个新的宽度值），并且我无法将主 div“拉伸”到 100% 宽度。

怎么办？

<div class="min-h-screen grid grid-cols-12">

  <div class="bg-green-500">
    <div style=`width: $randomWidthpx !important;`>
      Sidebar. This has dynamic width.
    </div>
  </div>

  <div class="bg-red-500">
    Main. This has full width.
  </div>

</div>

【参考方案1】：

我建议简单地使用 relative 和 absolute。这是codesandbox

<div class="min-h-screen w-full relative">

  #if sidebarVisible
    <div class="bg-green-500 h-full absolute left-0">
      <div style=`width: $randomWidthpx !important;`>
        Sidebar. This has dynamic width.
      </div>
    </div>
  /if

  <div class="bg-red-500 h-screen">
    Main. This has full width.
  </div>

</div>

对于 100% 宽度，您可以使用 w-full 和对于全屏高度 h-screen