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

【问题标题】：ReactJS content not filing up the whole page and is only taking up 3/4 of the available heightReactJS 内容没有填满整个页面，只占可用高度的 3/4
【发布时间】：2020-10-30 15:53:13
【问题描述】：

如您所见，包含粒子的 div 和 Home 组件仅使用了 3/4 的高度，即使 height 属性为 100%。我渲染组件是否错误，我应该怎么做才能使组件填满整个页面。

我认为问题出在 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;
}

【问题讨论】：

这能回答你的问题吗？ Make a div fill the height of the remaining screen space
您只设置了父容器的高度。您是实际上使用particle.js，还是使用react-particles-js？您能否更新您的问题以包含 ParticlesComponent 组件代码？
由于您只提供了一张图片，因此很难理解我们的案例中出了什么问题。你能分享一下实际的网站或代码库吗？
@DrewReese 是的，我正在使用 react-particles-js。我添加了代码。是不是粒子组件中div的样式不对？
@Constantin 嗨，很抱歉，我刚刚在 GitHub 上添加了完整的代码库：github.com/TanushN/portfolio。任何帮助将不胜感激。

标签： javascript html css reactjs react-particles-js

【解决方案1】：

Particles 组件采用props。

似乎效果不错的是为包装器指定 className 属性并将 width 和 height 设置为 100%。

CSS

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

粒子

<Particles className="wrapper" />

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

【讨论】：

不幸的是，这不起作用，但我设法通过 index.html 文件向 tsparticles 画布手动添加一些 css 来解决此问题。
@TanushN Particles 采用 width 和 height 道具，还有一个 style 道具，据说是画布元素，还有一个 canvasClassName 可以直接设置画布元素上的类名。 TBH，这是一个非常酷的模块，但不是非常用户友好，也不是 IMO 记录良好。
几周前我创建了一个关于全屏粒子的代码和牛模板：codesandbox.io/s/react-tsparticles-dw43f 关于文档有很多要阅读的react-particles-js 核心：tsParticles

【解决方案2】：

只需将其添加到particle.js 的第15 行

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

应该这样做。

可选：你有很多绝对位置，我会删除大部分并添加样式到

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

并确保安装所有依赖项，因为您将无法部署它。（react-particles-js、semantic-ui-css）。玩得开心编码！

【讨论】：

【解决方案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;
}

【讨论】：