CSS实现网页顶部、左右侧固定仅中间内容区域滚动效果

这个需求不需要写任何JavaScript，用现代CSS布局可以零bug实现，比你当前用float的方案维护成本低很多，不会出现浮动塌陷、高度计算错位的问题。 #

核心实现逻辑 #

整个方案只有3个核心规则，记牢就不会出错：

• 锁死整个页面的高度为浏览器视口高度，全局禁止滚动
• 把页面拆成「顶部固定高度栏 + 下方三栏容器」两层结构，两层高度加起来刚好撑满视口
• 仅给中间内容栏开启纵向内容溢出滚动，其余三个区域全部禁止溢出滚动

可直接复用的完整代码 #

代码完全沿用你已经定义的类名，直接替换原有CSS、补全对应DOM结构即可生效：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 全局重置，避免浏览器默认边距影响布局 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* 核心：锁死页面根节点高度，禁止全局滚动 */
    html, body {
      height: 100vh;
      overflow: hidden;
    }
    /* 页面整体容器，分上下两行：顶部100px，剩余高度给内容区 */
    .page-wrapper {
      display: grid;
      grid-template-rows: 100px 1fr;
      height: 100%;
    }
    /* 顶部栏样式，复用你原有配置 */
    .toppane {
      width: 100%;
      height: 100px;
      background-color: #ffffe7;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }
    /* 三栏容器，分三列：左25%、中50%、右25% */
    .content-wrapper {
      display: grid;
      grid-template-columns: 25% 50% 25%;
      height: 100%;
    }
    .leftpane {
      width: 100%;
      height: 100%;
      background-color: #084a83;
      overflow: hidden;
    }
    .middlepane {
      width: 100%;
      height: 100%;
      background-color: #c6e5f3;
      /* 核心：仅中间区域开启纵向滚动 */
      overflow-y: auto;
      padding: 20px;
    }
    .rightpane {
      width: 100%;
      height: 100%;
      background-color: #084a83;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="page-wrapper">
    <div class="toppane">顶部固定导航区</div>
    <div class="content-wrapper">
      <div class="leftpane">左侧固定菜单栏</div>
      <div class="middlepane">
        <!-- 中间区域放任意长度内容，超出后只会在当前区域滚动 -->
      </div>
      <div class="rightpane">右侧固定侧边栏</div>
    </div>
  </div>
</body>
</html>

新手易踩的注意点 #

• 你原有代码里写的border-collapse是表格元素专属属性，用在普通div块上没有任何效果，可以直接删除；加box-sizing: border-box就能保证padding、边框不会撑破你预设的宽度
• 不要用float做整页固定布局，浮动是为文字环绕效果设计的，脱离文档流后很容易出现高度计算错误、滚动条错位的问题，Grid/Flex是当前做这类布局的最优选择，代码逻辑简单、兼容性覆盖所有主流现代浏览器
• 如果习惯用Flex布局也可以实现完全一样的效果：外层容器设为纵向flex，顶部栏固定高度，三栏容器加flex: 1占满剩余高度；三栏容器设为横向flex，左右栏固定宽度，中间栏加flex:1+overflow-y:auto即可
• 后续要做响应式适配只需要修改grid-template-columns的宽度配置，比如移动端隐藏左右栏、改成点击弹出的抽屉，只需要改一行CSS规则就能实现

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