ReactJS 内容没有填满整个页面，只占可用高度的 3/4

Question

如您所见，即使高度属性为 100%，包含粒子和 Home 组件的 div 也只使用了 3/4 的高度。我是不是渲染错了组件，怎么办才让组件占满整个页面。

我认为问题出在 ParticlesComponent，因为它出于某种原因没有占用全部可用宽度。

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;

粒子组件：

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

更新

我是如何解决的

我将此添加到 index.html 文件中：

#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

Particles 分量需要 props。

为包装器指定 className 属性并将 width 和 height 设置为 100%.

似乎效果不错

CSS

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

粒子

<Particles className="wrapper" />

这允许 Particles 组件占据任何包含元素的完整高度和宽度。

Answer 2

只需将此添加到 particle.js，第 15 行

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

这应该可以做到。

可选：你到处都有很多绝对位置，我会删除大部分并向

添加样式

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

并确保安装所有依赖项，因为您将无法部署它。（react-particles-js，语义-ui-css）。编码愉快！

Answer 3

我是如何解决的

我将此添加到 index.html 文件中：

#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 内容没有填满整个页面，只占可用高度的 3/4

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

html

javascript

css

reactjs

react-particles-js