尾风网格动态边栏/导航栏宽度，主要宽度为100％

Question

我需要一个简单的主div列（已满100％）。

有时会出现带有动态宽度的侧边栏。

REPL：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: ${randomWidth}px !important;`}>
      Sidebar. This has dynamic width.
    </div>
  </div>

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

</div>

Answer 1

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

{
    "text": "Hey <users/123456789012345678901>! Thank you for using _Pizza bot!_"
}

对于100％的宽度，您可以使用<div class="min-h-screen w-full relative"> {#if sidebarVisible} <div class="bg-green-500 h-full absolute left-0"> <div style={`width: ${randomWidth}px !important;`}> Sidebar. This has dynamic width. </div> </div> {/if} <div class="bg-red-500 h-screen"> Main. This has full width. </div> </div> ，对于全屏高度，可以使用w-full