Bootstrap页面h-100与box-shadow滚动失效问题求解

问题根源在于h-100类设置的是height: 100%，当页面内容超过视口高度时，body的高度仍被限制在视口高度，滚动后超出部分自然没有阴影覆盖；但去掉h-100后，body高度由内容决定，内容不足时无法撑满视口。

下面是两种可行的解决办法：

方法1：用min-height: 100vh替代h-100 #

放弃给html和body添加h-100类，改用自定义样式设置最小高度为视口高度，这样内容不足时页面撑满全屏，内容过多时body高度自动扩展，阴影能覆盖整个页面：

html, body {
  min-height: 100vh;
  margin: 0; /* 清除默认边距避免不必要的滚动条 */
}
body {
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5); /* 替换为你的阴影样式 */
}

这种方法完全遵循文档流，不会引发额外的布局冲突。

方法2：用固定伪元素实现全局阴影 #

如果需要保留h-100类（比如依赖Bootstrap的垂直布局逻辑），可以给body添加一个固定定位的伪元素，让阴影独立于body高度始终覆盖视口：

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5); /* 替换为你的阴影样式 */
  pointer-events: none; /* 不干扰页面元素的点击交互 */
  z-index: -1; /* 将阴影放在内容下方，不遮挡页面内容 */
}
/* 保留h-100类实现初始全屏效果 */
html, body {
  height: 100%;
}

这种方法的优势是阴影始终固定在视口，滚动页面时阴影不会跟随内容移动，适合需要阴影固定效果的场景。

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