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