抽屉根容器必须用 min-height: 100vh 而非 height: 100vh，以确保内容超长时可滚动；需配合 --drawer-height 自定义属性与 calc() 动态计算高度，并监听 resize 事件更新，滚动区须独立设置 max-height 和 overflow-y-auto。
抽屉根容器必须用 min-height: 100vh，不能用 height: 100vh
用 height: 100vh 会导致内容超长时无法滚动，用户拉到底部后空白一片；min-height: 100vh 才能保证至少占满视口，又允许内容自然撑高。这个值要设在抽屉最外层容器上（比如 div.drawer），而不是内部滚动区。
常见错误是把 height: 100vh 写在 overflow-y-auto 的子容器里——那只会让滚动区固定高度，超出部分被截断，且滚动条出现在页面主体而非抽屉内。
--drawer-height 自定义属性要配合 calc() 动态计算可用空间
如果抽屉上方有吸顶导航栏（比如用了 env(safe-area-inset-top)），就不能直接写 height: 100vh，得减去顶部占用。这时用 CSS 自定义属性更可控：
给根容器设：style="--drawer-height: calc(100vh - var(--nav-height, 0px));"
立即学习“前端免费学习笔记（深入）”；
再在抽屉样式中用：min-height: var(--drawer-height);
这样后续改导航栏高度只需更新 --nav-height，不用动抽屉逻辑。注意：不要在 calc() 里混用单位（如 calc(100vh - 48px) 是安全的，但 calc(100vh - 1rem) 在某些安卓 WebView 中会失效）。
滚动区域必须独立设 max-height 和 overflow-y-auto
抽屉内容常含长列表或表单，需滚动，但滚动行为极易出错。关键点：
- 滚动容器不能是
body或页面主容器，必须是抽屉内部某个div - 该容器需同时满足：
max-height: calc(100vh - var(--nav-height) - 64px)（预留关闭按钮和底部边距） +overflow-y-auto - 别依赖
height: 100%—— 它在 flex 布局里常因父级没显式高度而失效 - 为防 Safari 滚动卡顿，加
-webkit-overflow-scrolling: touch
自定义属性要响应 env(safe-area-inset-top) 变化
iOS 地址栏收起/展开时，env(safe-area-inset-top) 值不变，但 window.innerHeight 会变，导致抽屉高度“跳一下”。不能只靠初始计算，得监听 resize 事件动态更新：
在 JS 中（哪怕只是轻量脚本）：
const updateDrawerHeight = () => {
const navHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--nav-height')) || 0;
document.documentElement.style.setProperty('--drawer-height', `calc(100vh - ${navHeight}px)`);
};
window.addEventListener('resize', updateDrawerHeight);
updateDrawerHeight();纯 CSS 无法响应这种运行时变化，这是最容易被忽略的兼容性盲区——很多团队测试时只看初始打开，漏掉了滚动中地址栏动画引发的高度错位。
