如何调整fixed定位div高度 让滚动条响应其内容而非底层div

你当前代码不生效的核心原因有两个：

• 所有设置position: fixed的元素都会完全脱离普通文档流，不会占用页面布局高度，浏览器计算页面滚动高度时只会识别普通流内的.div1（高度275vh），完全感知不到.fixedDiv的尺寸
• 你给父容器.fixedDivCon设置了overflow: auto，但内部的.fixedDiv也是固定定位，父容器无法获取子元素的实际高度，自然不会触发内部滚动。

按以下规则调整样式即可实现需求：

• 给html和body设置overflow: hidden，直接屏蔽底层.div1触发的根页面滚动
• 将.fixedDiv的定位从fixed改为absolute，让父容器.fixedDivCon可以正常感知它的高度
• 替换原有的transform居中方案，用四边偏移+margin: auto实现居中，这种方式可以适配任意高度的.fixedDiv，不管你手动设置固定高度，还是让内容自动撑高，滚动条都会出现在遮罩容器内，完全响应.fixedDiv的尺寸。

可直接运行的完整代码 #

html, body {
  margin: 0;
  /* 屏蔽底层div触发的页面滚动 */
  overflow: hidden;
}

.div1 {
  width: 100%;
  height: 275vh;
  background-color: gold;
}

.fixedDivCon {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(43, 45, 46, 0.89);
  z-index: 9999;
  /* 仅开启纵向滚动，响应内部fixedDiv的高度 */
  overflow-y: auto;
}

.fixedDivCon .fixedDiv {
  position: absolute;
  /* 四边设0配合margin:auto实现任意高度下的居中 */
  inset: 0;
  margin: auto;
  width: 80%;
  /* 高度可以任意修改，比如设为200vh测试超出一屏的滚动效果 */
  height: 150vh;
  background-color: #ffffff;
}

<div class="fixedDivCon">
  <div class="fixedDiv">
    <!-- 内部放任意长度的内容都可以，容器会自动适配高度触发滚动 -->
  </div>
</div>

<div class="div1">
</div>

补充说明：如果后续需要关闭固定遮罩、恢复底层.div1的滚动，只需要动态移除html,body上的overflow: hidden样式即可。如果不需要给.fixedDiv设固定高度，直接删掉它的height属性，加合适的内边距，容器滚动会自动适配内容的实际高度。

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