ReactJS content not filing up the whole page and is only taking up 3/4 of the available height

Question

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 wrong, what should i do so the component fills up the whole page.

I think the problem is the ParticlesComponent as it is not taking the full available width for some reason.

App.js:

  return (
     <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%"
        }}
      >
        <ParticlesComponent />
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%"
          }}
        >
          <Home/>
        </div>
      </div>
   
  );
}

export default App;

Particle Component:

export default () => (
    <div
      style={{
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        backgroundSize: "cover",
        backgroundPosition: "50% 50%"

      }}
    >
      <Particles
        // unrelated particle code that I decided to remove so that it doesn't clog up the page
      />
      
    </div>
  );

UPDATE

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

Answer 1

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

Answer 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%;
height 100%

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!

Answer 3

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

<Particles className="wrapper" />

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