英文:
Why elements on screen are not fullscreen?
问题
我没有将我的 React 网页应用程序全屏显示，因为页面上的元素数量太少。
CSS：
html {
height: 100%;
width: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: block;
position: fixed;
object-fit: cover;
z-index: -2;
right: 0;
bottom: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("./assets/background-img.png");
background-repeat: no-repeat;
background-position: center top;
background-position-y: -24em;
background-size: 100% 100%;
}
JSX：
return (
<>
<Navbar />
<div className='header-div'>
<h3 className='text-above'>
------- A HIKING GUIDE
</h3>
<div className='main-text'>
Be Prepared For The Mountains And Beyond!
</div>
</div>
</>
);
我尝试过的一切都在代码中，但我无法解决问题。希望能得到你的帮助。
英文:
I don't have my web-app on react full-screen, having so small amount of elements on the page.
Css:
html {
height: 100%; width: 100%;
}
* {
margin: 0; padding: 0; box-sizing: border-box;
}
body {
min-height: 100vh;
display:block;
position: fixed;
object-fit: cover;
z-index: -2;
right: 0;
bottom: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url("./assets/background-img.png");
background-repeat: no-repeat;
background-position: center top;
background-position-y: -24em;
background-size: 100% 100%;
}
Also have some other styles for h-s, etc, but I suppose it's not the cause of the problem, so I removed is.
JSX:
return (
<>
<Navbar />
<div className='header-div'>
<h3 className='text-above'>
------- A HIKING GUIDE
</h3>
<div className='main-text'>
Be Prepared For The Mountains And Beyond!
</div>
</div>
</>
);
Everything i tried is in the code, and i can't figure it out. Hope on your help
答案1
得分: 0
这是你的背景定位，我已经将其注释掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,html {
height: 100%;
width: 100%;
display:block;
position: fixed;
object-fit: cover;
z-index: -2;
right: 0;
bottom: 0;
/* background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url("./assets/background-img.png"); */
background-repeat: no-repeat;
/* background-position: center top; */
/* background-position-y: -24em; */
background-size: 100% 100%;
}
* {
margin: 0; padding: 0; box-sizing: border-box;
}
</style>
</head>
<body>
</body>
</html>
英文:
It's your background positioning, I commented it out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,html {
height: 100%;
width: 100%;
display:block;
position: fixed;
object-fit: cover;
z-index: -2;
right: 0;
bottom: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)), url("./assets/background-img.png");
background-repeat: no-repeat;
background-position: center top;
/*background-position-y: -24em;*/
background-size: 100% 100%;
}
* {
margin: 0; padding: 0; box-sizing: border-box;
}
</style>
</head>
<body>
</body>
</html>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论