css - Tailwind 网格动态侧边栏/导航栏宽度,主宽度为 100%
问题描述
我需要一个 100% 满的简单主 div 列。
有时会出现一个侧边栏,具有动态宽度。
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>
解决方案
我建议简单地使用relative和absolute。这是代码框
<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
推荐阅读
- javascript - 如何以及在哪里(最佳)将 POST/GET 变量转换为 Express.js 中的数字?
- python - 如何找到最小(或最大)属性的名称?
- javascript - 我无法使用 neDB 数据库按字母顺序对数据进行排序
- php - 向我展示一种在没有原始 SQL 的情况下按复杂条件对 eloquent 集合进行排序的方法
- python - 从 QML 访问 qresource 文件中的图像
- go - 带有 journal_mode=WAL 的 go-sqlite3 给出“数据库已锁定”错误
- python - 在字符串列表中搜索具有可变字符的单词
- java - Java多线程通信,Producer-Consumer-Cancellation,四个线程交互。任何干净可靠的方法来做到这一点
- javascript - 如何将 Webpack 配置文件定向到集中依赖项
- sql - GrandParent、Parent、Child、GrandChild 中 4 个表的外键,因此将 Parent Field 级联更改为 GrandChild