答案是使用 position: absolute 结合 height: 100vh 或父容器高度，使侧边栏固定定位并保持高度适配，通过 overflow-y 实现内部滚动，需确保父元素 relative 定位以形成正确布局上下文。
使用CSS定位制作固定侧边栏，关键是结合 position: absolute 和合适的 height 设置，让侧边栏在页面滚动时保持位置不变，同时高度适配整体布局。
1. 基本结构与定位设置
要实现固定效果的侧边栏，先构建简单的HTML结构：
<div class="container"> <div class="sidebar">侧边栏内容</div> <div class="main-content">主内容区</div> </div>
.container {
position: relative;
min-height: 100vh; /* 容器至少占满视口高度 */
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%; /* 高度占满父容器 */
background-color: #333;
}
.main-content {
margin-left: 220px; /* 避开侧边栏 */
padding: 20px;
}
这样侧边栏会相对于容器固定在左侧顶部，高度撑满整个容器。
立即学习“前端免费学习笔记（深入）”；
2. 使用 height: 100vh 实现全屏高度
如果希望侧边栏始终等于浏览器可视区域高度（即使内容不足），可直接设置：
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100vh; /* 占满视口高度 */
background-color: #333;
}
这种方式不依赖父容器高度，适合单页应用或全屏布局。但注意：当页面内容超过视口时，主内容可滚动，而侧边栏不会自动延伸，除非额外设置 min-height 或监听滚动。
3. 配合 overflow 处理滚动内容
若侧边栏内有大量内容需要独立滚动，可限制高度并启用内部滚动：
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100vh;
overflow-y: auto; /* 超出时显示滚动条 */
background-color: #333;
}
</font>这样侧边栏本身固定，内部内容可单独上下滚动，不影响主区域。
4. 注意事项与兼容性
- 使用 absolute 定位时，父元素应设为 position: relative，否则会相对于视口或最近定位祖先元素。
- height: 100% 要生效，父级必须有明确高度；height: 100vh 更直接，适用于现代浏览器。
- 移动端需测试 vh 单位表现，某些浏览器中键盘弹出会干扰计算。
基本上就这些。用 absolute + height 控制侧边栏，灵活且兼容性好，适合需要精确控制布局的场景。关键在于理解高度来源和定位上下文。
