![](/img/trans.png)
[英]ScrollY/ScrollTop doesn't work when height of html and body is 100%
[英]React body doesn't seem to get 100% height
我想找到解决这种特殊性的方法。 我试图在我的应用程序主体中设置渐变背景,但我的主体似乎没有达到屏幕的 100%,这会导致背景重复。 我以前从未见过这样的事情,有人知道为什么吗?
应用程序.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
应用程序.js:
import React, { useState, useEffect } from 'react';
import { ClipLoader } from 'halogenium';
import {useSpring, animated} from 'react-spring'
import ComponentCentral from './components/componentCentral/ComponentCentral'
import './App.css';
import NavBar from './components/navbar/NavBar'
import Footer from './components/footer/Footer'
function App() {
const estilo = useSpring({opacity: 1, from: {opacity: 0}})
const [conteudoPage, setConteudoPage] = useState(<animated.div style={estilo}><ClipLoader className="loaderCircle" color="#26A65B" size="200px"/></animated.div>);
const [usuario, setUsuario] = useState("");
return (
<div className="App">
<NavBar usuario={usuario}></NavBar>
{conteudoPage}
<Footer></Footer>
</div>
);
}
export default App;
索引CSS:
html, body {
padding: 0;
margin : 0;
width : 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing: grayscale;
background : linear-gradient(-45deg, #85FFBD 0%, #FFFB7D 100%);
/* background-size: 200%; */
}
#root{
height: 100%;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
hr {
border : 0;
height : 1px;
background : #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
margin-top : 25px
}
a.envelopeOK:link,
a.envelopeOK:visited {
background-color: #84F0B9;
color : #135D36;
padding : 14px 25px;
text-align : center;
text-decoration : none;
display : inline-block;
border-radius : 5px;
}
a.envelopeOK:hover,
a.envelopeOK:active {
background-color: #41f397;
}
我会发送发生的事情的图片
你知道如何让身体 100% 保持渐变不重复吗?
编辑:
感谢所有帮助我的人,我统一了一些解决方案并设法解决了我的问题。 当我使用 react 时,我最终放置了许多嵌套的 div,我只设置了主体尺寸,而没有让我的其他 div 自行增长。 我的解决方案:仅在正文中放置默认填充和边距 0 设置,并将所有高度和背景的扩展部分放置在正文的子 div 中:#root。 这样,body 会随着根 div 的增加而增加,并且随着内容的生成而增加。
body {
padding: 0;
margin: 0;
}
#root {
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: linear-gradient (-45deg, # 85FFBD 0%, # FFFB7D 100%);
}
我检查了你的代码一切看起来都不错! 这个代码有什么用??
hr {
border : 0;
height : 1px;
background : #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
margin-top : 25px
}
尝试删除它,看看会发生什么。
在正文中添加一个容器:
.container {
height:100vh
}
由于我最终通过合并和测试工作人员的部分 css 来解决问题,因此我会将其留在编辑中,因为它已解决,谢谢大家!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.