关键不是“固定”，而是“固定+预留空间”：侧边栏用position: fixed+top: 0+left: 0+width+height: 100vh，主内容必须设margin-left等于其实际宽度（如240px），响应式时需媒体查询同步调整，收展交互须js配合transform实现。
侧边栏固定但不遮挡主内容的CSS方案
直接用 position: fixed 容易导致主内容被侧边栏盖住，关键不是“固定”，而是“固定 + 预留空间”。主流解法是给 <main></main> 或主体容器加 margin-left（或 padding-left），值等于侧边栏宽度。注意：这个宽度必须是确定值（如 240px）或用 calc() 动态计算，不能依赖百分比或 auto。
- 侧边栏用
position: fixed+top: 0+left: 0，高度设为100vh或用height: 100%配合父容器min-height: 100vh - 主内容区域必须设置
margin-left: 240px（假设侧边栏宽240px），否则文字会从侧边栏底下穿过去 - 如果侧边栏宽度响应式变化（比如小屏收起），
margin-left必须用媒体查询同步调整，否则错位
移动端适配时侧边栏收起的JS控制逻辑
纯CSS无法实现“点击按钮展开/收起固定侧边栏”，必须靠JS切换类名。常见错误是只改 display 或 visibility，但 fixed 元素仍占布局空间或影响滚动——正确做法是用 transform: translateX(-100%) 移出视口，并配合 transition 实现滑动效果。
- 初始状态给侧边栏加
class="sidebar-collapsed"，对应样式：transform: translateX(-100%) - 点击按钮时移除该类，同时主内容区域动态加
margin-left: 0（小屏下不需要预留空间） - 务必监听
window.resize，在屏幕宽度跨越临界点（如768px）时自动收起/展开，避免手动操作遗漏
两栏自适应宽度的flex布局替代方案
如果不需要侧边栏“永远固定在视口”，只是希望它和主内容并排且随窗口缩放，display: flex 更可靠。它天然支持等高、响应式比例分配，且无需手动算 margin。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父容器设
display: flex，侧边栏设flex: 0 0 240px（不伸缩、不收缩、基础宽240px） - 主内容区域设
flex: 1，自动填满剩余空间 - 小屏下用媒体查询把父容器改成
flex-direction: column，侧边栏就自然堆叠到顶部或底部 - 注意：IE11对
flex支持有限，flex: 1要写成flex: 1 1 0才兼容
滚动时侧边栏内容截断或错位的修复点
固定定位的侧边栏如果内部有长列表或可滚动区域，容易出现滚动条消失、内容被裁切，根源通常是父容器没设 overflow-y: auto 或高度计算错误。
- 侧边栏自身必须设
overflow-y: auto，且高度不能只靠100%——要明确设为calc(100vh - 60px)（减去头部高度） - 如果页面有 sticky 头部，侧边栏的
top值要匹配头部高度，否则滚动时会覆盖或错位 - 避免在侧边栏里嵌套
position: absolute的元素，它们会相对于视口定位，而不是侧边栏容器
实际项目中，固定侧边栏的“固定”二字最容易让人忽略滚动上下文和空间预留的耦合关系——只要主内容没让出位置，再精确的 fixed 也会变成遮罩层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
