单页网站开发需求：带滚动区域的三栏固定侧边栏布局

Got it，我来帮你搞定这个需求，基于你现有的table布局思路调整就行，很简单。首先注意下你代码里的小细节：HTML中间栏的class是middle，但CSS里写的是.center，我先统一成.center避免样式不生效，然后直接上完整代码：

完整CSS代码 #

/* 先让根元素占满视口高度，清除默认边距 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container{ 
  display: table; 
  width: 100%; 
  height: 100%; 
}

.container > div { 
  vertical-align: top; 
}

.left, .center, .right { 
  display: table-cell; 
  height: 100%; /* 确保所有栏都占满容器高度，实现等高 */
}

.left, .right{ 
  width: 200px; 
  background-color: #f5f5f5; /* 可选：加背景色区分栏，方便调试 */
}

.center {
  overflow-y: auto; /* 核心：垂直方向内容超出时自动显示滚动条 */
  padding: 0 15px; /* 可选：加内边距让内容不贴边，提升体验 */
}

对应HTML结构 #

<div class="container">
  <div class="left">
    <!-- 左侧固定宽度内容 -->
    <p>左侧栏内容</p>
    <p>比如导航菜单</p>
  </div>
  <div class="center">
    <!-- 这里放你的动态数据 -->
    <p>动态内容行1</p>
    <p>动态内容行2</p>
    <p>动态内容行3</p>
    <!-- 可以多复制几行测试滚动效果 -->
    <p>动态内容行50</p>
  </div>
  <div class="right">
    <!-- 右侧固定宽度内容 -->
    <p>右侧栏内容</p>
    <p>比如侧边信息</p>
  </div>
</div>

关键修改点说明 #

1. 根元素高度设置：给html和body设置height:100%并清除默认边距，这样你的.container的height:100%才能正确继承视口高度，确保布局占满整个屏幕。
2. 等高布局保障：给三个栏都加上height:100%，配合display: table-cell的特性，左右栏会自动和中间栏保持等高，不管中间内容有多长。
3. 中间滚动实现：核心就是给.center加overflow-y: auto——当中间内容高度超过视口高度时，会自动出现垂直滚动条；内容不足时不会显示滚动条，完全自适应。

这个方案完全兼容你原来的布局思路，动态加载内容也能完美适配，滚动体验流畅。

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