React开发中wrapper div未占满全屏 背景渐变出现分割线如何解决

百分比高度需要向上继承所有父级节点的高度定义，你当前只给html、body、.app设置了height: 100%，但挂载React应用的#root节点、以及你嵌套的ScrollToTop组件都没有设置高度继承，导致wrapper拿到的height: 100%/min-height: 100%失效。
另外你给html,body加的align-items: center是flex布局专属属性，没有配套设置display: flex的情况下属于无效属性，反而可能在部分场景下干扰高度计算。

90%以上的概率是**外边距塌陷（margin collapse）**导致的：如果wrapper内部的子元素（比如首页、登录页的标题、内容模块）自带默认的margin-top，在wrapper没有边框、内边距、overflow属性拦截的情况下，子元素的上边距会穿透wrapper，和body的边距叠加，看起来就像两者之间出现了空白分割线。
另外如果wrapper高度不足、渐变没有铺满，和body的渐变衔接错位也会出现类似分割线的视觉效果。

按以下步骤调整即可实现全屏无断层渐变背景：

1. 先补全所有根节点的高度配置，修改index.css代码：

html, body, #root {
  width: 100%;
  /* 用min-height+vh适配内容不足一屏、超出一屏两种场景，比百分比高度兼容性更好 */
  min-height: 100vh;
  margin: 0;
  padding: 0;
  /* 删掉无效的align-items属性 */
}
/* 同时调整.app的高度配置 */
.app {
  min-height: 100%;
}

2. 给wrapper添加配置，直接用wrapper承载渐变即可，不需要修改body样式：

.wrapper {
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(#42275a, #734b6d);
  /* 用1px透明内边距拦截外边距塌陷，不会影响视觉效果 */
  padding-top: 1px;
}

如果确认要用body承载渐变，只需要给.app加一行padding-top: 1px即可消除分割线。

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