如何让div可滚动而页面其余内容保持固定？（CSS实现）

你用错了overflow属性，而且缺少关键的高度设置，按下面的步骤修改即可：

• 把overflow-x: scroll改成overflow-y: auto（auto是仅在内容超出时显示滚动条，换成scroll会一直显示垂直滚动条）
• 必须给这个列表div设置固定高度或最大高度，比如用height: 80vh（占视口高度的80%）或者具体像素值，否则div会自动撑高来容纳所有内容，不会触发滚动
• 页面其他内容只要不在这个滚动div内部，默认就是固定不动的；如果需要更严格的固定（比如固定在顶部），可以给这些元素加position: sticky; top: 0;

示例代码： #

<!-- 页面固定内容 -->
<div class="fixed-content">
  <h1>页面标题</h1>
  <p>这部分内容固定不动</p>
</div>

<!-- 可滚动的列表div -->
<div class="scrollable-list">
  <div class="list-item">项目1</div>
  <div class="list-item">项目2</div>
  <div class="list-item">项目3</div>
  <div class="list-item">项目4</div>
  <!-- 更多项目... -->
</div>

.fixed-content {
  padding: 1rem;
  background: #fff;
  /* 可选：固定在顶部 */
  position: sticky;
  top: 0;
}

.scrollable-list {
  /* 设置最大高度，超出则滚动 */
  max-height: 70vh;
  /* 垂直方向滚动 */
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid #eee;
}

.list-item {
  padding: 0.8rem;
  border-bottom: 1px solid #eee;
}

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