基于Display:flex的固定布局及内部Div滚动实现问题

嘿，这个问题我熟！你的基础flex布局已经搭好了，只需要给section和滚动内容加几个关键属性，就能完美实现内部div滚动、其他元素固定的效果。

核心思路 #

你的.full容器已经是固定高度的flex列布局了，现在要让section内部也变成flex容器，让需要滚动的内容占据剩余空间，同时给它加上滚动属性。

完整代码实现 #

HTML（给滚动内容加个类名方便控制）

<div class="full">
  <header>
    <h1>header stuff</h1>
  </header>
  <section>
    <div class="scrollable-content">
      <!-- 这里放大量内容，比如重复的文本测试 -->
      <p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p>
      <p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p>
      <p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p>
      <p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p>
      <p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p><p>测试内容</p>
    </div>
    <div>b</div>
    <div>c</div>
  </section>
</div>

CSS（关键修改点已标注）

.full {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0; /* 去掉默认body margin带来的滚动条 */
}

header {
  /* 用标准flex属性顺序：flex-grow flex-shrink flex-basis，固定高度78px */
  flex: 0 0 78px;
  background: #ececec;
  color: black;
  padding-left: 33px;
  display: flex;
  align-items: center; /* 可选：让header文字垂直居中 */
}

section {
  flex: 1 1 auto; /* 占据.full容器的剩余空间 */
  display: flex; /* 让section内部也成为flex容器 */
  flex-direction: column; /* 子元素按垂直方向排列 */
  overflow: hidden; /* 防止内部元素撑破section边界 */
}

.scrollable-content {
  flex: 1 1 auto; /* 占据section里除了底部b、c之外的所有空间 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  padding: 1rem; /* 可选：给内容加内边距，提升体验 */
}

/* 可选：自定义滚动条样式，提升美观度 */
.scrollable-content::-webkit-scrollbar {
  width: 8px;
}
.scrollable-content::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.scrollable-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
.scrollable-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

关键细节说明 #

• header的固定高度：用flex: 0 0 78px替代原来的写法，这是flex属性的标准顺序（增长因子、收缩因子、基准值），确保header不会被拉伸或压缩，始终保持78px高度。
• section的flex设置：给section加上display: flex; flex-direction: column;，让它的子元素能按垂直方向分配空间；overflow: hidden是为了避免滚动内容过多时撑大section，导致整个页面出现滚动条。
• 滚动容器的核心属性：flex:1让滚动容器自动填充剩余空间，overflow-y:auto则在内容高度超过容器时触发垂直滚动，同时保持底部的b、c两个div固定在section底部。

内容的提问来源于stack exchange，提问作者TKoL