Css 反应：将HTML、正文和应用程序设置为100%高度后，应用程序高度仅为页面的一半

我的应用程序的背景照片只显示在页面的一半。它似乎仅限于组件的长度，尽管我曾试图用代码将其分开

我已经在App.css文件中将HTML、Body和App组件的高度设置为100%。但结果是我的应用程序背景只占据了屏幕的一半

App.js文件

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navigation />
        <Logo />
        <Rank />
        <ImageLinkForm />
        <FaceRecognition />
      </div>
    );
  }
}

我最初将css文件的.App部分设置为body，以便应用程序的背景覆盖整个页面，但我希望能够单独进一步修改背景图像，如果图像在body中，我就不能这样做

---

我希望我的背景照片是唯一被操纵的东西，而不是整个网站。

啊，你说得对！它是

#根

！我还添加了溢出：隐藏到

.App

折叠页边距

#根{
身高：100%；
}

看看下面的例子：

---

啊，你说得对！它是

#根

！我还添加了溢出：隐藏到

.App

折叠页边距

#根{
身高：100%；
}

看看下面的例子：

---

尝试使用

高度：100vh而不是
高度：100%。这将迫使您的元素适应全视图高度
尝试使用
高度：100vh而不是
高度：100%。这将迫使您的元素适应全视图高度
您的背景需要更改。用背景色检查是否覆盖整个页面。最好将
大纲：1px纯色.App
上进行code>以查看div是否覆盖了整个视口。尝试使用
高度：100vh
而不是
高度：100%
@Alberto您的答案解决了我的问题。如果你想，你可以把它作为一个答案，所以我可以适当地给你信用这一点@A-Bro
vh
可能不是正确的解决方案。你很快就会知道原因<代码>：）
您的背景需要更改。用背景色检查是否覆盖整个页面。最好将
大纲：1px纯色.App
上进行code>以查看div是否覆盖了整个视口。尝试使用
高度：100vh
而不是
高度：100%
@Alberto您的答案解决了我的问题。如果你想，你可以把它作为一个答案，所以我可以适当地给你信用这一点@A-Bro
vh
可能不是正确的解决方案。你很快就会知道原因<代码>：）
根据CRA的设置方式以及OP的原始问题的提问方式，这应该是公认的答案。我还要补充一点，如果设置
#root{height:100%；}
不能解决您的问题，请尝试从index.js（根节点连接的位置）向下进行调查。如果有任何后续组件使用div包装，如果希望子组件能够访问主体的整个高度，则将这些组件的高度也设置为100%，这一点至关重要。这是一个很容易看的东西，所以以防万一它有帮助！根据CRA的设置方式和OP最初问题的提问方式，这应该是公认的答案。我还要补充一点，如果设置
#root{height:100%；}
不能解决您的问题，请尝试从index.js（根节点连接的位置）向下进行调查。如果有任何后续组件使用div包装，如果希望子组件能够访问主体的整个高度，则将这些组件的高度也设置为100%，这一点至关重要。这是一个很容易看的东西，所以以防万一它有帮助！