如何用纯CSS实现：浏览器缩小时首个Div收缩滚动、第二个Div高度固定

我经常用Flexbox布局来处理这种自适应空间分配的需求，完全不需要JS就能搞定。核心思路是让父容器占据整个视口高度，然后分配空间给两个div：第二个固定高度，第一个自动填充剩余空间，内容溢出时显示滚动条。

完整代码示例 #

<div class="container">
  <div class="shrinkit">..many lines of text..</div>
  <div class="noscroll">..many lines of text..</div>
</div>

<style>
/* 消除默认边距，确保根元素占满视口 */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* 父容器用垂直Flex布局，高度占满视口 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 第一个div填充剩余空间，内容溢出时显示垂直滚动条 */
.shrinkit {
  background-color: blue;
  flex: 1;
  overflow-y: auto;
  /* 可选：加一点内边距让内容不贴边 */
  padding: 1rem;
}

/* 第二个div固定高度 */
.noscroll {
  background-color: green;
  height: 200px; /* 这里可以改成你需要的固定高度 */
  padding: 1rem;
}
</style>

关键属性解释 #

• flex: 1：给.shrinkit设置这个属性后，它会自动占据父容器中除了.noscroll之外的所有剩余空间。
• overflow-y: auto：当.shrinkit里的内容高度超过分配给它的空间时，自动显示垂直滚动条，内容未溢出时则不会出现滚动条。
• height: 100vh：让父容器高度等于浏览器视口的高度，确保布局始终贴合窗口大小。

备选方案：Grid布局 #

如果你更偏好Grid布局，也能实现同样的效果：

.container {
  display: grid;
  grid-template-rows: 1fr 200px; /* 第一行占剩余空间，第二行固定200px */
  height: 100vh;
}

.shrinkit {
  background-color: blue;
  overflow-y: auto;
  padding: 1rem;
}

.noscroll {
  background-color: green;
  padding: 1rem;
}

这两种方案都能完美实现你要的效果，窗口高度变化时，.shrinkit会自动收缩并在需要时显示滚动条，.noscroll则保持固定高度不变。

内容的提问来源于stack exchange，提问作者nagy.zsolt.hun