设置100%高度的背景modal无法铺满全屏问题排查

问题核心：你当前用position: absolute + height: 100%的方式，只会让Modal覆盖最近非static定位父元素的高度，如果父元素高度仅为可视区域高度，或者页面内容超出可视区域，就会出现只覆盖一半的情况。

以下是两种可行的解决方法：

方法一：使用Fixed定位（推荐，适合模态框场景） #

将Modal的定位改为fixed，它会相对于浏览器视口定位，无论页面滚动与否，都能铺满整个可视区域：

#modalBackground {
  display: none;
  position: fixed; /* 替换absolute为fixed */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 用视口高度单位确保铺满 */
  background-color: rgb(0 0 0 / 0.7);
  z-index: 10;
}

或者更稳妥的写法，不用设置height，直接用上下左右定位：

#modalBackground {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; /* 四个方向都设为0，自动铺满整个视口 */
  background-color: rgb(0 0 0 / 0.7);
  z-index: 10;
}

方法二：确保Absolute定位覆盖整个文档高度 #

如果需要Modal覆盖包括滚动区域在内的整个文档高度，需要先给根元素设置高度，再调整Modal的样式：

1. 先设置html和body的高度：

html, body {
  height: 100%;
  margin: 0; /* 清除默认margin，避免出现滚动条或留白 */
}

2. 修改Modal的CSS：

#modalBackground {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%; /* 确保至少覆盖根元素高度 */
  background-color: rgb(0 0 0 / 0.7);
  z-index: 10;
}

额外优化：禁止页面滚动 #

当Modal显示时，建议给body添加overflow: hidden，防止用户滚动页面：

// 显示Modal时
document.getElementById('modalBackground').style.display = 'block';
document.body.style.overflow = 'hidden';

// 隐藏Modal时
document.getElementById('modalBackground').style.display = 'none';
document.body.style.overflow = 'auto';

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