Reactjs Content Not Filing Up The Whole Page And Is Only Taking Up 3/4 Of The Available Height

As you can see the div that contains the particles and the Home component is only using up 3/4 of the height even when the height attribute is 100%. Am I rendering the component wr

Solution 1:

The Particles component takes props.

What seems to work well is specifying the className prop for the wrapper and setting width and height to 100%.

CSS

.wrapper {
  height: 100%;
  width: 100%;
}

Particles

<ParticlesclassName="wrapper" />

This allows the Particles component to take the full height and width of any containing element.

Solution 2:

Just add this in particle.js, line 15

<Particles
        style={{
          minHeight: '100vh'
        }}

This should do it.

Optional: you have a lot of position absolute all over the place, I would remove most and add styles to the

position: fixed;
top: 0;
left: 0;
width: 100%;
height100%

And make sure to install all the dependencies, because you will not be able to deploy it. (react-particles-js, semantic-ui-css). Have fun coding!

Solution 3:

How I managed to solve it

I added this to the index.html file:

#tsparticles{
  width: 100%;
  height: 100%;
  position: fixed;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.body-particles{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}