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

Does this answer your question? [Make a div fill the height of the remaining screen space](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — , Jul 09 '20 at 23:39
You've only set the height of the parent container. Are you *actually* using `particle.js`, or are you using `react-particles-js`? Can you updated your question to include the `ParticlesComponent` component code? — Drew Reese, Jul 09 '20 at 23:39
Since you provided just an image, it's hard to understand what's wrong in our case. Can you please share the actual website or the codebase? — Constantin, Jul 09 '20 at 23:41
@DrewReese Yea, Im using react-particles-js. I added the code. Is the styling of the div wrong in the particle component? — Tanush N, Jul 10 '20 at 00:29
@Constantin Hi, sorry about that, I have just added the full code base on GitHub: https://github.com/TanushN/portfolio. Any help would be greatly appreciated. — Tanush N, Jul 10 '20 at 00:49
Try to inspect element, `heigth:100%` is depends on the height of parent element's height, make sure your parent element's is full height. — Rio A.P, Jul 10 '20 at 00:50
@RapSherlock Your right it looks canvas of the particles is the problem here, it is not taking 100% width and 100% even I though I specified it to do. Insepect Element picture for more details: [Picture](https://imgur.com/a/kHwFQMZ) — Tanush N, Jul 10 '20 at 01:23
You need to check all parent element and make sure that height is set correctly 100% or if you don't care about all display on your container just set using Viewport Height (vh) `height: 100vh`, with `fixed` or `absolute` position to the element do you want to full height. — Rio A.P, Jul 10 '20 at 01:37

score 2 · Answer 1 · answered Jul 10 '20 at 04:02

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!

score 0 · Answer 2 · answered Jul 10 '20 at 02:21

0

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.

answered Jul 10 '20 at 02:21

Drew Reese

165,259
14
153
181

1

Unfortunately this didn't work, but I managed to fix this issue by manually adding some css to the tsparticles canvas through index.html file. – Tanush N Jul 10 '20 at 02:37
@TanushN `Particles` takes `width` and `height` props, as well as a `style` prop that supposedly is to the canvas element, and there is also a `canvasClassName` to directly set a classname on the canvas element. TBH, this is a pretty cool module but not very user friendly nor documented well IMO. – Drew Reese Jul 10 '20 at 02:47
I created a template on codesandox with full screen Particles some weeks ago: https://codesandbox.io/s/react-tsparticles-dw43f About documentation there's a lot to read on `react-particles-js` core: `tsParticles` – Caelan Jul 10 '20 at 13:07

score 0 · Accepted Answer · answered Nov 17 '21 at 07:34

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

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

3 Answers3

Linked