【问题标题】:Tailwind grid dynamic sidebar/navbar width with main 100% widthTailwind 网格动态侧边栏/导航栏宽度,主宽度为 100%
【发布时间】: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: ${randomWidth}px !important;`}>
      Sidebar. This has dynamic width.
    </div>
  </div>

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

</div>

【问题讨论】:

    标签: css grid tailwind-css


    【解决方案1】:

    我建议简单地使用 relativeabsolute。这是codesandbox

    <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>
    

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

    【讨论】:

      猜你喜欢
      • 2021-06-07
      • 2023-03-30
      • 1970-01-01
      • 2021-09-15
      • 2013-10-16
      • 2021-12-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多