设置translateX或left后，绝对定位div无法占满高度问题

核心原因：transform 创建新的包含块与堆叠上下文 #

当你给其他元素设置 translateX（属于 CSS transform 属性）时，该元素会触发两个关键行为，间接影响你的绝对定位导航栏：

1. 成为绝对定位元素的包含块：根据 CSS 规范，只要元素设置了非 none 的 transform 属性，无论它的 position 是什么，都会成为其内部绝对定位元素的包含块。如果你的移动端导航栏的父/祖先元素被这个带 transform 的元素意外影响，导航栏的高度计算会从原本的视口/顶层容器，变成以这个带 transform 的元素为参考，从而导致高度异常。
2. 视口高度计算偏差：若导航栏使用 height: 100vh，部分移动端浏览器在页面存在 transform 元素时，会出现视口高度计算偏差，也可能导致高度异常。

针对性解决方案 #

1. 明确导航栏的包含块 #

给移动端导航栏的直接父容器设置 position: relative，并且确保这个父容器没有设置 transform、perspective、filter 等会创建包含块的属性。这样导航栏的绝对定位会始终以这个父容器为参考，不受其他元素的 transform 影响：

<!-- 示例结构 -->
<div class="relative min-h-screen"> <!-- 明确的包含块 -->
  <div class="absolute inset-y-0 left-0 w-64 bg-white"> <!-- 移动端导航栏 -->
    <!-- 导航内容 -->
  </div>
  <!-- 其他可能设置 translateX 的元素 -->
  <div class="transform translate-x-4">...</div>
</div>

2. 使用动态视口高度替代固定视口高度 #

如果导航栏需要占满整个视口高度，改用 height: 100dvh（Tailwind 对应类 h-dvh）代替 h-screen/height: 100vh。dvh 是动态视口单位，会根据实际可视区域计算高度，避免 transform 元素导致的视口计算偏差：

<div class="absolute inset-y-0 left-0 w-64 h-dvh bg-white">
  <!-- 导航内容 -->
</div>

3. 检查父容器的高度计算逻辑 #

确认导航栏的父容器是否存在高度塌陷问题：如果父容器是弹性布局或浮动布局，确保其高度能正确撑开（比如设置 min-h-screen、flex-1 等），避免因其他元素的定位/变换导致父容器高度异常，进而影响导航栏高度。

内容的提问来源于stack exchange，提问作者BIKI DAS