如何设置HTML div占满父容器 子元素溢出时自动显示滚动条

这个需求完全可以通过纯CSS实现，不需要编写JavaScript代码，使用Flex或Grid布局都能满足要求，兼容性也完全适配Electron的Chromium内核环境。

实现原理 #

你之前的代码未生效是因为没有限制根容器和父容器的高度，同时未给中间容器分配剩余空间的规则，height: auto会让滚动区高度跟随内容高度撑开，最终导致全局出现滚动条。

Flex布局实现方案（最常用） #

1. 基础全局配置

先清除默认边距，让根元素占满整个视口高度：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  /* 禁用全局滚动条 */
  overflow: hidden;
}

2. 外层容器配置

给包裹三个div的最外层容器添加垂直Flex布局规则：

/* 给最外层div加类名wrapper */
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

3. 滚动区配置

给中间滚动区设置自动占用剩余空间的规则：

.scroll-zone {
  /* 自动占满上下容器外的所有剩余垂直空间 */
  flex: 1;
  overflow: auto;
}

.big-box {
  height: 1000px;
  border: 1px solid black;
}

完整HTML结构参考

<div class="wrapper">
  <div>
    I would like that the scroll zone expands down to the bottom of the browser
    window. (this text should always be visible)
  </div>
  <div class="scroll-zone">
    scroll-zone
    <div class="big-box">big-box</div>
  </div>
  <div>After scroll zone (should always be visible)</div>
</div>

备选Grid布局方案 #

外层容器也可以用Grid实现，规则更直观：

.wrapper {
  height: 100%;
  display: grid;
  /* 三行高度分别为：自适应内容、占满剩余空间、自适应内容 */
  grid-template-rows: auto 1fr auto;
}

不需要额外给中间滚动区加其他高度规则，保留overflow: auto即可实现效果。

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