Particles.js, Как сделать так, чтобы высота холста, содержащего анимированные частицы, охватила его родительский элемент на маленьких экранах

Question

Я пытаюсь использовать частицу.js, если честно, я никогда раньше не использовал холст HTML5, сейчас мне нужно быстрое исправление, поэтому я использую библиотеку под названием vue-частиц для простой интеграции и использования частиц.js в Vue. Приложение.js, у меня оно отлично работает и работает, проблема возникает, когда я уменьшаю ширину экрана, поэтому на экране моего ноутбука, который 1364px wide и выше, нет никаких проблем, когда речь идет о планшетах и ​​экранах мобильных устройств, холст покрывает только 50% высоты его родительского компонента, я попытался вручную нацелить элемент canvas и настроить его высоту на 100%, но это либо не работает вообще, либо охватывает всю страницу, а не только родительский элемент. поэтому я был бы признателен, если бы кто-нибудь помог мне с этим.

Вот как я использовал его в моем компоненте.vue

<template>
 <div class="parent">
  <div id="particles">
   <vue-particles color="dedede" :particlesNumber="40"></vue-particles>
  </div>
 </div>
</template>

Если вам нужен дополнительный код или информация для выяснения проблемы, пожалуйста, оставьте это в комментарии ниже,

заранее спасибо.