html - Particles.js，如何使包含动画粒子的画布的高度跨越其在小屏幕上的父元素

Question

我正在尝试使用particles.js，老实说，我以前从未使用过HTML5画布，我现在只需要一个快速修复，所以我使用了一个名为vue-particles的库，以便在Vue中轻松集成和使用particles.js .js 应用程序，我把它启动并运行得很好，当我减小屏幕宽度时会出现问题，所以在我的笔记本电脑屏幕上，1364px wide没有问题，当它下降到平板电脑和手机屏幕尺寸时， canvas 仅覆盖其父组件高度的 50%，我尝试定位 canvas 元素并将其高度调整为 100%，但它要么根本不起作用，要么覆盖整个页面而不是仅其父元素。所以如果有人帮我解决这个问题，我将不胜感激。

这就是我在 .vue 组件中使用它的方式

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

如果您需要更多代码或信息来澄清问题，请将其留在下面的评论中，

提前致谢。