我的应用程序的背景图片只占了页面的一半。它似乎受限于组件的长度,即使我试图将其与我的代码分开。
我已经在我的 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,以便应用程序的背景覆盖页面,但我希望能够单独进一步修改背景图像,如果图像在体内。
我希望我的背景照片是唯一被操纵的东西,而不是我网站的整个主体。
最佳答案
啊你是对的!这是#root
!我还在 .App
中添加了 overflow: hidden;
以折叠边距。
#root {
height: 100%;
}
关于css - react : App height only half of page after setting HTML, Body 和 App 到 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54009909/