如何让React应用的背景色覆盖无限滚动的全页面高度

问题原因 #

你遇到的滚动后背景变白问题，核心是两个配置误区：

• 给App组件设置height: 100%时，它的父级节点html、body、React根挂载节点#root均未设置高度，百分比高度规则无法生效
• height: 100vh仅能让元素高度等于当前视口高度，当页面内容超出视口长度时，超出部分无法被覆盖，就会漏出body默认的白色背景

解决方法 #

方案1：全局样式修改（最稳定）

在项目的全局CSS文件（通常是src/index.css）中添加以下代码即可：

/* 清除所有元素默认内外边距，避免出现边缘白边 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 所有根节点统一设置最小高度和背景色 */
html, body, #root {
  min-height: 100vh;
  background-color: #000;
  color: #fff; /* 可选配置，统一默认文字为白色，避免黑背景下文字不可见 */
}

这个方案会直接把整个页面的根节点背景都设为黑色，不管内容多长都不会出现漏白。

方案2：仅修改App组件样式

如果不想改动全局样式，只需要把App组件的高度属性从height: 100vh改为min-height: 100vh即可：

/* App组件对应的CSS样式 */
.app {
  min-height: 100vh;
  width: 100%;
  background-color: #000;
}

min-height: 100vh会保证元素至少占满一整屏视口，内容超出视口高度时会自动跟着内容撑开，全程保持黑色背景。

你提交的问题参考截图：

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