position: fixed是唯一能真正避免撑开页面宽度的定位方式，因其完全脱离文档流，不参与布局计算；width/max-width在fixed元素上失效且动画卡顿，应改用transform: translatex()配合断点控制宽度实现平滑收放。

position: fixed 是唯一能真正避免撑开页面宽度的定位方式，其他任何 position: absolute、display: flex 或 float 布局下的侧边抽屉，只要没脱离文档流，就一定会参与父容器宽度计算，导致主内容被挤压、跳动甚至水平滚动条出现。

为什么 width 和 max-width 在抽屉上不管用

抽屉必须脱离文档流才能不干扰主内容，而 width 和 max-width 只在文档流内生效。一旦你给抽屉加了 position: fixed，这些属性就失去布局意义——浏览器不再用它们决定空间分配，只当作视觉渲染参考，且动画极其卡顿。

• width: 0 → width: 280px 触发重排（reflow），移动端掉帧明显
• max-width: 80vw 在 fixed 元素上不约束实际占用空间，长文本仍会突破视口
• 用 transform: translateX() 移动时，浏览器走合成层，不触发重排，性能稳

抽屉容器必须加 overflow: hidden

即使用了 transform，如果抽屉内部有未限制换行的长 URL 或英文单词，依然会横向溢出，把整个页面撑宽。这不是抽屉“本身”宽了，而是它的子元素突破了容器边界。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给抽屉根元素设 overflow: hidden（不是 auto）
• 内部文字加 white-space: normal + word-break: break-word（注意：不是 break-all，否则破坏可读性）
• 避免对 ul 或 nav 直接设 width: max-content，它在 fixed 容器里计算异常

移动端键盘弹出时抽屉被顶起？靠 visualViewport 补救

iOS/Android 软键盘弹出会缩容 100vh，导致 fixed 抽屉底部留白或内容被遮盖。这不是 CSS 能单靠媒体查询解决的，必须用 JS 动态响应。

• 监听 visualViewport?.resize 事件，更新抽屉高度：height: ${visualViewport.height}px
• 同时在 body 加 style="height: 100vh; overflow: hidden" 防止滚动穿透
• 别依赖 window.innerHeight，它在键盘弹出后不实时更新

真正难处理的不是“怎么收放”，而是“收放过程中所有边界条件是否都被堵死”——比如长文本、键盘、手势拖拽、缩放 viewport、嵌套 transform 等。每个都可能单独让抽屉破框，必须逐个验证。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！