CSS如何实现仅单个嵌套div可滚动 其余嵌套区域固定？

实现方法 #

这类顶部固定、仅内容区滚动的布局不要用position: fixed，很容易出现层叠错位，用纵向Flex布局实现最稳妥，不需要手动计算高度留占位，也不会出现偏移问题：

• 给最外层容器设置固定高度：全屏页面设height: 100vh，页面内局部模块就设对应需要的固定高度，将容器配置为纵向Flex布局，禁止整个容器出现滚动条：

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

• 红色区域的2个div（头部、搜索栏）不需要加任何定位属性，直接放在容器顶部，加flex-shrink: 0防止内容过多时被压缩即可，会自动固定在顶部不随滚动移动：

.red-fixed-block {
  flex-shrink: 0;
  /* 正常写背景、内边距等业务样式即可，无需设置position属性 */
}

• 蓝色内容区设置flex: 1自动占满容器剩余高度，开启纵向滚动，内容溢出时只有这个区域会滚动：

.blue-scroll-block {
  flex: 1;
  overflow-y: auto;
}

之前fixed方案异常的原因 #

position: fixed是相对浏览器视口定位，会完全脱离正常文档流，元素原本占据的位置会消失，下方内容会自动上移，就会出现搜索栏和头部互相层叠错位的问题。如果你的布局是在页面内的局部弹窗、模块中实现，fixed元素会直接跳出父容器相对整个页面偏移，完全不符合需求。
如果硬要用fixed实现，必须给蓝色内容区加上和红色区域总高度相等的padding-top，把内容挤到固定区域下方，但这种方案适配性极差，红色区域高度变化时必须同步修改padding值，不推荐使用。

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