如何固定侧边栏与头部、仅内容区滚动？flexbox是最优方案吗

算力阿峰

2026-8-27

问题解答

方案选型结论

使用flexbox实现「固定侧边栏+固定头部+仅内容区滚动」的布局是当前最优方案之一，代码简洁、维护成本低、现代浏览器兼容性好，相比传统绝对定位方案自适应能力更强，不会出现内容遮挡、尺寸计算错误的问题。

原有代码失效原因

原有代码未达到预期效果，核心是缺少高度约束和弹性布局的层级设置：

根节点html、body未设置100%高度，父容器高度被内容撑开，没有形成固定视口高度的边界
右侧容器#body未设置为纵向弹性布局，内部的头部、内容区无法按纵向规则分配高度
#content没有明确的剩余高度约束，浏览器无法判断滚动触发阈值，只会将父级容器随内容撑高，最终导致整个页面滚动

修正后可直接运行的代码

不需要调整原有HTML结构，仅修改CSS即可实现效果：

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

#page-app {
  display: flex;
  height: 100%;
  background: red;
}

#sidebar {
  width: 200px;
  flex-shrink: 0;
  background: blue;
}

#body {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: green;
}

#header {
  height: 60px;
  flex-shrink: 0;
  background: pink;
}

#content {
  flex: 1;
  overflow: auto;
}

<div id="page-app">
  <section id="sidebar">
    sidebar
  </section>
  <div id="body">
    <header id="header">
      header
    </header>
    <section id="content">
      content<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
    </section>
  </div>
</div>