最稳解法是给主内容容器设 padding-bottom 等于侧边栏实际高度，配合 box-sizing: border-box；需确保侧边栏直挂 body 下、避免被 overflow 或 transform 父容器限制；ios 键盘弹出时应监听 focus/blur 并用 visualviewport 动态更新。
给主内容容器加 padding-bottom，值等于侧边栏高度
fixed 侧边栏不占文档流，页脚会“穿”到它底下，视觉上被遮住。最稳的解法不是动侧边栏，而是让主内容主动留白。直接在包裹全部页面内容的容器（比如 #app 或 main）上设 padding-bottom，值取侧边栏渲染后的实际高度（含内边距，不含 margin）。
- 推荐作用于最外层内容容器，而非
body，避免干扰第三方样式或全局布局 - 必须配合
box-sizing: border-box，否则 padding 会额外撑高容器 - 响应式场景下可用 CSS 变量：比如定义
--sidebar-height: 60px，然后padding-bottom: var(--sidebar-height) - 禁用
margin-bottom替代——它对 fixed 元素无效，且易引发外边距合并
侧边栏本身别嵌套在滚动容器里
如果侧边栏被包在一个 overflow: auto 或 overflow: scroll 的父容器中，它的 position: fixed 会失效，降级为 relative 定位，结果就是跟着容器一起滚，反而更容易和页脚打架。
- 检查 DOM 结构，确保
.sidebar直接挂载在body下，或至少不在任何设置了overflow的祖先内 - 特别注意那些带
transform、will-change或contain: layout的父元素——它们会创建新包含块，把 fixed “锁死”在局部 - 若结构无法调整，改用
position: sticky+top: 0更可控，且天然适配局部滚动
移动端键盘弹出时 padding-bottom 要动态更新
iOS Safari 软键盘弹出会压缩视口高度，但 window.innerHeight 不一定实时反映真实可视区域，静态 padding-bottom 就会失效，页脚又被盖住。
- 监听
focus事件，在输入框获取焦点后用setTimeout(() => { ... }, 0)延迟读取getBoundingClientRect().bottom，才准 - blur 时要恢复原值，且多个输入框共用同一底部区域时，恢复逻辑必须严格匹配 focus 顺序，否则侧边栏会“悬空”
- 更轻量的做法是：只在键盘真弹出时才更新，用
visualViewport?.height（iOS 16.4+）比window.innerHeight更可靠
别直接操作 element.style.bottom
试图用 JS 动态算出页脚顶部位置，再设置 element.style.bottom，看似精确，实则容易白忙活。
-
bottom是相对于视口计算的，而 iOS 地址栏收起、字体缩放、键盘弹出都会让视口动态变化，JS 算的值刚设完就被浏览器重绘覆盖 -
resize事件在 iOS 上捕获不到地址栏显隐，监听它没用 - 直接写
style.bottom会触发强制重排，性能差；且和 CSS 中的inset或top/right冲突，优先级难控 - 真正该动
bottom的场景极少——仅当页脚高度完全不可控（如 JS 动态插入、用户缩放字体、键盘覆盖区域不固定）时才考虑，且应通过 CSS 变量驱动，而非硬编码 style
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
