React body 似乎没有达到 100% 的高度

Question

我想找到解决这种特殊性的方法。我正在尝试在我的应用程序主体中设置渐变背景，但我的主体似乎没有达到屏幕的 100%，这会导致背景重复。 我以前从未见过这样的事情，有人知道为什么吗？

app.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();

App.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;
}

我会发送所发生情况的图片

body image limit

image showing duplicate gradient

你知道如何让身体 100% 保持渐变不重复吗？

编辑：

感谢所有帮助我的人，我统一了一些解决方案并设法解决了我的问题。 当我使用 react 时，我最终放置了许多嵌套的 div，我只设置了 body 大小并且没有让我的其他 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%);
}

Answer 1

我检查了您的代码 一切正常！ 这个代码是干什么用的？？

hr {
border          : 0;
height          : 1px;
background      : #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
margin-top      : 25px
}

尝试删除它，看看会发生什么。

Answer 2

由于我最终通过合并和测试工作人员的部分 css 来解决，所以我将在已解决的情况下将其留在编辑中，谢谢大家！

Answer 3

在正文中添加一个容器：

.container {
   height:100vh
}