ReactJS контент не занимает всю страницу и занимает только 3/4 доступной высоты

Question

Как видите, div, содержащий частицы, и компонент Home использует только 3/4 высоты, даже если атрибут высоты равен 100%. Неправильно ли я визуализирую компонент, что мне делать, чтобы компонент заполнил всю страницу.

Я думаю, проблема в ParticlesComponent, поскольку он по какой-то причине не занимает всю доступную ширину.

введите описание изображения здесь

Приложение 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>
  );

ОБНОВЛЕНИЕ

Как Мне удалось его решить

Я добавил это в индекс. 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

Просто добавьте это в частицу. js, строка 15

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

Это должно сработать.

Необязательно: у вас много абсолютных позиций повсюду, я удалит большинство и добавит стили в

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

И обязательно установите все зависимости, потому что вы не сможете развернуть его. ( реагировать-частицы- js, семанти c -ui-cs s). Удачи кодированию!

Answer 2

Компонент Particles принимает props .

Кажется, хорошо работает указание className prop для оболочки и установка width и height на 100%.

CSS

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

Частицы

<Particles className="wrapper" />

Это позволяет компоненту Particles принимать всю высоту и ширину любого содержащего элемента.

Отредактируйте react-sizes- js полную ширину и высоту