如何用CSS实现左侧固定右侧可滚动的技能列表布局

布局需求分析

我们要实现的布局效果很明确：页面左侧有一个固定宽度的容器，比如用来展示技能分类或者个人信息，这个容器不会随页面滚动而移动；右侧是技能列表区域，当技能条目数量超过容器高度时，右侧区域可以独立滚动，左侧始终保持固定位置。这种布局常见于个人作品集、后台管理系统的侧边栏等场景。

方法一：固定定位实现

固定定位是最直观的实现方式，核心思路是给左侧容器设置position: fixed，右侧容器设置对应的左边距，同时给右侧容器设置滚动属性。

HTML结构

<div class="layout">
  <div class="left-side">
    <h3>技能分类</h3>
    <ul>
      <li>前端开发</li>
      <li>后端开发</li>
      <li>运维部署</li>
    </ul>
  </div>
  <div class="right-content">
    <div class="skill-item">HTML/CSS 熟练</div>
    <div class="skill-item">JavaScript 熟练</div>
    <div class="skill-item">Vue.js 掌握</div>
    <div class="skill-item">React 了解</div>
    <div class="skill-item">Node.js 掌握</div>
    <div class="skill-item">MySQL 熟练</div>
    <div class="skill-item">Docker 了解</div>
    <div class="skill-item">Git 熟练</div>
  </div>
</div>

CSS样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.layout {
  min-height: 100vh;
}
.left-side {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
  border-right: 1px solid #e0e0e0;
}
.left-side h3 {
  margin-bottom: 15px;
  font-size: 18px;
}
.left-side ul {
  list-style: none;
}
.left-side li {
  padding: 8px 0;
  font-size: 14px;
  color: #333;
}
.right-content {
  margin-left: 200px;
  height: 100vh;
  overflow-y: auto;
  padding: 20px;
}
.skill-item {
  padding: 15px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  font-size: 14px;
}

这种方法的优点是兼容性好，几乎所有浏览器都支持。但要注意如果左侧容器的高度是动态变化的，需要手动调整height属性，否则可能出现高度不匹配的问题。

方法二：Flex布局实现

Flex布局是更现代的实现方式，适合需要灵活调整布局的场景，不需要使用固定定位，通过父容器的flex属性就可以实现左侧固定右侧自适应。

CSS样式调整

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.layout {
  display: flex;
  min-height: 100vh;
}
.left-side {
  width: 200px;
  flex-shrink: 0; /* 防止左侧容器被压缩 */
  background-color: #f5f5f5;
  padding: 20px;
  border-right: 1px solid #e0e0e0;
  overflow-y: auto; /* 如果左侧内容过多也可以滚动 */
}
.left-side h3 {
  margin-bottom: 15px;
  font-size: 18px;
}
.left-side ul {
  list-style: none;
}
.left-side li {
  padding: 8px 0;
  font-size: 14px;
  color: #333;
}
.right-content {
  flex: 1; /* 右侧占据剩余空间 */
  overflow-y: auto;
  height: 100vh;
  padding: 20px;
}
.skill-item {
  padding: 15px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  font-size: 14px;
}

Flex布局的优势在于如果后续需要调整左侧宽度，只需要修改width属性，右侧会自动适配，不需要手动调整margin-left，维护起来更方便。

常见问题解决

• 如果右侧滚动区域不生效，检查是否设置了明确的height，或者父容器是否有高度限制，百分比高度需要父容器有明确高度才能生效。
• 固定定位方法中，如果页面有其他定位元素，可能会出现层级覆盖问题，可以给左侧容器设置z-index属性调整层级。
• 如果技能列表内容很少，右侧区域不需要滚动，可以去掉overflow-y: auto，让高度自适应内容。

总结

实现左侧固定右侧可滚动的技能列表布局，固定定位适合简单场景，兼容性好；Flex布局适合需要灵活调整的场景，维护更方便。开发者可以根据项目需求选择合适的实现方式，两种方法的代码都可以直接复用，只需要调整宽度、颜色等样式属性就能适配不同的设计需求。

CSS布局固定定位overflow属性flex布局技能列表修改时间：2026-05-29 17:33:49