css - react : App height only half of page after setting HTML, Body 和 App 到 100% 高度

Question

我的应用程序的背景图片只占了页面的一半。它似乎受限于组件的长度，即使我试图将其与我的代码分开。

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

App.js 文件

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

App.css 文件

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.App {
  background: url('/assets/background.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 100%;
}

button, link {
  cursor: pointer;
}

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

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

Answer 1

啊你是对的!这是#root!我还在 .App 中添加了 overflow: hidden; 以折叠边距。

#root {
  height: 100%;
}

查看CodeSandbox preview :