[英]React: App height only half of page after setting HTML, Body and App to 100% height
My App's background photo goes only to half of the page. 我的应用程序的背景图片仅显示到页面的一半。 It seems to be limited to the length of the components, even though I had attempted to separate that with my code. 即使我试图将其与我的代码分开,它似乎也仅限于组件的长度。
I have already set HTML, Body, and the App component to a height of 100% in my App.css file. 我已经在App.css文件中将HTML,Body和App组件的高度设置为100%。 But the result is my app background taking up only half of the screen. 但是结果是我的应用背景仅占据了一半的屏幕。
App.js file App.js文件
class App extends Component {
render() {
return (
<div className="App">
<Navigation />
<Logo />
<Rank />
<ImageLinkForm />
<FaceRecognition />
</div>
);
}
}
App.css file 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;
}
I had originally set the .App portion of my css file to body so that the App's background would cover the page, but I would like to be able to further modify the background image alone, which I can't do if the image is within the body. 我最初将css文件的.App部分设置为body,以便该应用程序的背景覆盖该页面,但是我希望能够进一步单独修改背景图像,如果图像在身体。
I want my background photo to be the only thing manipulated, not the entire body of my site. 我希望背景照片是唯一可以操纵的东西,而不是整个网站。
Ah your are right! 啊,你是对的! It's the #root
! 这是#root
! I have also added overflow: hidden;
我还添加了overflow: hidden;
to .App
for collapsing the margins. 到.App
折叠边距。
#root {
height: 100%;
}
Look at the CodeSandbox preview : 查看CodeSandbox预览 :
Try with height: 100vh;
尝试height: 100vh;
instead of height: 100%;
而不是height: 100%;
. 。 This will force your elements to adapt to the full ViewHeight 这将迫使您的元素适应整个ViewHeight
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.