Блог

Я хотел найти решение этой особенности. Я пытаюсь установить градиентный фон в теле моего приложения, но кажется, что мое тело не достигает 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;
}
  

Я отправлю изображения того, что произошло

ограничение изображения тела

изображение, показывающее повторяющийся градиент

Знаете ли вы, как оставить тело на 100%, чтобы градиент не повторялся?

Редактировать:

Спасибо всем, кто помог мне, я объединил некоторые решения и сумел решить свою проблему. Поскольку я работаю с react, я в конечном итоге размещаю много вложенных divs, где я только устанавливаю размеры тела и не позволяю другим моим divs расти сами по себе. Мое решение: поместите в тело только настройки заполнения по умолчанию и margin 0, а всю расширенную часть высоты и фона я поместил в дочерний div тела: #root. При этом тело увеличивается с корневым 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
}
  

попробуйте удалить это и посмотреть, что произойдет.

Поскольку я закончил решение путем слияния и тестирования частей css of the staff, я оставлю его в отредактированном виде, поскольку он был решен, спасибо всем!

Добавьте контейнер в тело:

 .container {
   height:100vh
}