如何解决React页面100vh高度外背景色无法完全填充的问题

问题原因 #

你为.Home容器设置了固定高度height: 100vh，这会将容器高度强制限制为当前视口的高度，当内部卡片内容总高度超过视口高度时，溢出的内容不属于.Home容器的渲染范围，自然不会继承容器的背景色。

解决方案 #

方案1（推荐）：将固定高度改为最小高度 #

把.Home的height属性替换为min-height，这样容器最小高度为视口高度，内容溢出时会自动撑开容器高度，背景色会覆盖整个内容区域：

.Home {
      background: #121212;
      color: #b9b9b9;
      min-height: 100vh; /* 替换原来的height:100vh */
      width: 100%;
}

该方案适配绝大多数首页场景，页面整体会随内容长度滚动，背景色全程生效。

方案2：保留固定高度，添加滚动属性 #

如果你需要.Home容器始终保持视口高度，可添加溢出滚动属性，让超出的内容在容器内部滚动：

.Home {
      background: #121212;
      color: #b9b9b9;
      height: 100vh;
      width: 100%;
      overflow-y: auto; /* 新增属性 */
}

该方案下只有.Home容器内部会出现滚动条，页面整体高度不变。

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