React项目设置全屏背景图时容器高度未铺满屏幕问题求助

你设置的.container高度为100%时，百分比高度会继承父级元素的高度属性，而你没有给上层的html、body、#root三个根节点设置高度，这三个节点默认高度由内部内容撑开，因此.container的高度最终只匹配内部h1元素的高度，导致背景图仅展示部分区域。块级元素默认宽度为100%，可继承父级的全视口宽度，因此宽度表现符合预期。

方案1：修改全局根节点高度配置 #

在index.css头部添加根节点样式，同时清除浏览器默认边距避免出现多余白边，该方案适合页面内容高度不会超过一屏的场景：

/* 新增根节点样式 */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

方案2：使用视口高度单位vh适配（更推荐） #

不需要修改全局根节点样式，直接把.container的高度属性替换为min-height: 100vh即可。100vh代表浏览器可视区域的100%高度，min-height可以保证内容高度不足一屏时背景占满全屏，内容超过一屏时背景会随内容自动延伸，适配性更强：

.container {
  /* 把原来的height: 100%替换为下方属性 */
  min-height: 100vh;
  margin: 0;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

如果修改后出现横向滚动条，可在index.css中添加body { overflow-x: hidden; }即可解决。

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