fixed侧边栏需显式添加top-0 bottom-0才能拉满视口高度，否则仅按内容渲染导致底部留白或被裁剪；避免依赖h-screen/min-h-screen，推荐min-h-[100dvh]配合top-0 bottom-0，并确保外层容器直接应用fixed脱离文档流。
fixed侧边栏没拉满高度，底部留白或被裁剪
直接加 fixed w-64 不会自动撑满视口高度——fixed 元素默认只按内容高度渲染，不继承父容器高度，也不自动响应 viewport 变化。常见现象是侧边栏只高几行就“断掉”，下方露出主内容或背景色。
- 必须显式添加
top-0 bottom-0，让元素从视口顶部延伸到底部 - 避免依赖
h-screen或min-h-screen：它们编译为height: 100vh/min-height: 100vh，在软键盘弹出时会失效（iOS 不更新 vh） - 更稳妥的写法是
min-h-[100dvh]+top-0 bottom-0，但前提是 Tailwind 版本 ≥ 3.3 且浏览器支持 dvh（iOS 16.4+、Chrome 109+） - 如果用
flex flex-col布局侧边栏内部，确保子项未设h-full或min-h-0，否则会覆盖stretch行为，导致等高失效
移动端抽屉式侧边栏滚动异常或底部多出滚动条
这不是侧边栏本身高度不够，而是它仍参与文档流，或其父容器保留占位，间接撑高了 ，导致整个页面出现垂直滚动条。典型结构是外层 div 仅加 hidden，内层才用 fixed。
- 错误写法：
<div class="hidden"><div class="fixed inset-0">...</div></div>—— 外层div仍是static，可能带min-h-screen，浏览器计算高度时计入它 - 正确做法：把
fixed直接加在最外层容器上，例如<div id="mobile-menu" class="fixed z-50 hidden inset-y-0 left-0 w-full"> <li>配套加 <code>inset-y-0 left-0比仅inset-0更可控，避免因 RTL 或其他定位干扰偏移 - 若侧边栏内容区需内部滚动，别让它撑高父级：给内容容器加
max-h-[calc(100vh-4rem)] overflow-y-auto（预留顶部导航高度），而非h-full - 侧边栏自身加
flex-shrink-0，防止被 flex 压缩；再加h-full或min-h-full（后者更安全，兼容内容少时） - 避免在侧边栏上同时用
h-full和flex-1：前者强制填满，后者尝试分配剩余空间，冲突会导致高度计算异常 - 如果父容器是
grid，用row-span-full比h-full更可靠，尤其在多行 grid 中
flex布局下侧边栏高度随内容塌陷
当侧边栏作为 flex 容器的子项（如 <aside class="w-64"></aside> 在 <div class="flex"> 中），它默认不会拉伸到父容器高度，尤其当父容器没设明确高度来源时。
<ul>
<li>父容器必须有可测量高度：加 <code>min-h-screen 或 h-dvh，不能只靠内容撑开
卡片类侧边栏内容区域高度失控
侧边栏里嵌套 <div class="bg-white rounded-lg p-4"> 这类卡片时，卡片高度常不随侧边栏同步，尤其内容少时塌成一条线，或内容多时溢出无滚动。
<ul>
<li>卡片容器别单独设 <code>h-64 这类固定高度类——Tailwind 默认不生成未配置的数值，h-50 若未在 theme.spacing 中定义，会被解析为 h-0
h-[256px] 或 min-h-[256px]，确保高度可预测max-h-[calc(100vh-8rem)] overflow-y-auto，并确保父侧边栏已脱离文档流（fixed）或有明确高度约束max-w-full h-auto，否则原始尺寸可能突破容器宽度，引发横向溢出，间接影响高度计算逻辑fixed 侧边栏看 top/bottom，flex 子项看父容器是否可测高，grid 子项看行高和 row-span。漏掉其中一环，高度就断了。
