实现固定高度页面的中间Flex面板独立垂直滚动需求

核心布局逻辑 #

采用CSS Grid实现左右分栏，右侧内容区用Flexbox垂直排布，确保footer固定在底部、中间面板可独立垂直滚动。

HTML结构 #

<div class="page-container">
  <aside class="toolbar">左侧Toolbar</aside>
  <main class="content-area">
    <div class="panel-top">顶部面板</div>
    <div class="panel-middle">
      中间滚动面板<br>
      测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
      测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
      测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
      测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
      测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>
    </div>
    <footer class="fixed-footer">固定Footer</footer>
  </main>
</div>

CSS实现 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page-container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 左侧toolbar固定宽度，右侧占满剩余空间 */
  height: 100vh; /* 容器高度完全适配浏览器视口 */
}

.toolbar {
  background-color: #ff6b6b;
  padding: 1rem;
}

.content-area {
  display: flex;
  flex-direction: column; /* 垂直排布子元素 */
  height: 100%; /* 继承容器高度 */
}

.panel-top {
  background-color: #4ecdc4;
  padding: 1rem;
  height: 80px; /* 可自定义顶部面板高度 */
}

.panel-middle {
  background-color: #ffe66d;
  padding: 1rem;
  flex: 1; /* 填充顶部面板和footer之外的所有剩余垂直空间 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
}

.fixed-footer {
  background-color: #1a535c;
  color: white;
  padding: 1rem;
  height: 60px; /* 固定footer高度 */
}

关键属性说明 #

• height: 100vh：确保页面容器完全覆盖浏览器视口，避免整体页面出现滚动条。
• grid-template-columns: 200px 1fr：快速实现左右分栏，右侧自适应剩余宽度。
• flex: 1：让中间面板自动占据垂直方向的剩余空间，保证footer始终固定在底部。
• overflow-y: auto：仅在中间面板内容超出时显示滚动条，实现独立垂直滚动。

内容的提问来源于stack exchange，提问作者Wonko the Sane