反應：將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 ！ 我還添加了overflow: hidden; 到.App折疊邊距。

#root {
  height: 100%;
}

查看CodeSandbox預覽 ：

Answer 2

嘗試height: 100vh; 而不是height: 100%; 。 這將迫使您的元素適應整個ViewHeight