如何移除React网页应用中出现的多余未知“页脚”区域

问题原因 #

你看到的底部多余区域本质是浏览器视口未被body内容覆盖的部分：默认状态下html、body元素的高度仅由内部内容高度决定，内容高度小于视口高度时，未被填充的视口区域就会显示浏览器默认背景，看起来像额外的页脚。你提到缩小body尺寸时该区域填充剩余空间、body占满屏幕时仍然存在，完全符合这个特征。

解决方法 #

你已经找到的方案是正确的，只需要在全局CSS中添加高度相关规则即可，推荐写法如下：

/* 方案1：让html和body直接撑满整个视口高度，适配所有场景 */
html, body {
  min-height: 100vh;
  margin: 0;
}

/* 方案2：直接给根容器设置最小高度，和你现有代码适配性更好 */
#outer-container.App {
  min-height: 100vh;
  background-color: #060405;
}

两种方案二选一即可，添加后整个视口都会被你设置的深色背景覆盖，不会再出现多余的底部区域。

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