javascript - 扩大 Canvas 以适应以下 div

Question

我有一个 canvas，我希望它是 100% 屏幕宽度和至少 100% 屏幕高度，但如果以下 div 超出底部屏幕。

我正在使用 Trianglify 填充 Canvas 。

    var pattern = Trianglify({
      cell_size: 25,
      x_colors: 'Greens'
    });
    pattern.canvas(document.getElementById('container1'));
    setInterval(function() {
      // method to be executed;
      var pattern = Trianglify({
        cell_size: 25,
        x_colors: 'Greens'
      });
      pattern.canvas(document.getElementById('container1'));
    }, 1000);

canvas#container1 {
  position: absolute;
  width: 100vw;
  min-height: 100vh;
}
.screen-container {
  min-height: 100vh;
  position: relative
}
.trianglify-container {
  background-color: transparent;
  color: #fff;
  text-align: center;
  padding-top: 20vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<canvas id="container1"></canvas>
<div class="screen-container trianglify-container">
  <div class="container">
    ...
  </div>
</div>

编辑

对我来说重要的是紧跟在 Canvas 之后的 div 需要让 Canvas 覆盖它的所有背景并至少覆盖 1 个屏幕。如果有不同的方法可以实现这一点，我很乐意调整我的方法。

Answer 1

这个结果是你想要的吗？

-- 长内容--

var pattern = Trianglify({
      cell_size: 25,
      x_colors: 'Greens'
    });
    pattern.canvas(document.getElementById('container1'));
    setInterval(function() {
      // method to be executed;
      var pattern = Trianglify({
        cell_size: 25,
        x_colors: 'Greens'
      });
      pattern.canvas(document.getElementById('container1'));
    }, 1000);

.outer-wrapper{
  min-height: 100vh;
  position: relative;
}
canvas#container1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.screen-container {
  /*min-height: 100vh;*/
  position: relative;
}
.trianglify-container {
  background-color: transparent;
  color: #fff;
  text-align: center;
  /*padding-top: 20vh;*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<div class="outer-wrapper">
  <canvas id="container1"></canvas>
  <div class="screen-container trianglify-container">
    <div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper lacinia semper. Pellentesque dignissim tempus nisi sit amet porttitor. Sed laoreet, nisi eu auctor cursus, tellus turpis porta diam, ac fermentum enim odio auctor dolor. Duis in nunc rhoncus, vestibulum est at, fermentum ligula. Suspendisse dui dui, luctus id lacus eu, tempor venenatis sem. Ut pellentesque sodales turpis quis efficitur. Donec vulputate placerat orci, vitae porttitor nunc. Etiam risus nibh, porta porta libero in, tempor auctor dolor. Quisque id augue at dui egestas vulputate.

Praesent tristique eu urna non faucibus. Nunc leo urna, euismod in neque vitae, elementum consequat libero. Integer in dignissim nunc, id scelerisque metus. Etiam ut ipsum iaculis, ullamcorper eros nec, elementum odio. Donec ornare lorem a semper porttitor. Suspendisse tincidunt mauris nec dui rhoncus, in semper augue blandit. Integer laoreet, velit sed molestie malesuada, enim quam mollis sapien, ullamcorper sollicitudin mi mi non urna. Mauris eu dignissim lectus.

Aliquam lacus tortor, dictum quis pulvinar volutpat, tincidunt id leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce fermentum aliquam neque vitae bibendum. Nulla volutpat luctus urna et faucibus. Fusce convallis nulla tortor, vel ornare ante scelerisque in. Vivamus justo odio, porta nec vulputate ut, volutpat quis ipsum. Praesent id volutpat justo, sit amet euismod dui. In eget erat massa. Aliquam ultrices egestas ipsum, ac tincidunt diam gravida ac. Nullam tortor dui, viverra scelerisque vehicula varius, luctus in ipsum. Nulla dolor est, mattis in pellentesque at, interdum ac nibh.

Ut bibendum tellus varius orci aliquet luctus. Duis tortor nisl, suscipit at ornare ut, scelerisque nec dolor. Ut efficitur facilisis nulla a rutrum. Donec ut sodales odio, sed venenatis leo. Ut scelerisque eros in gravida fringilla. Aliquam fringilla vitae orci sed tincidunt. Aenean efficitur nibh elit, id sollicitudin enim mattis ut.

Praesent hendrerit ex eget quam ultrices, eget iaculis nunc pellentesque. In in orci interdum sapien bibendum sagittis. Mauris at massa quis nisi commodo facilisis at vel ligula. Vestibulum vitae aliquet lorem, vel faucibus lacus. Integer tortor nulla, rutrum dictum elit a, iaculis scelerisque nulla. Suspendisse massa eros, cursus quis enim a, volutpat aliquam quam. Fusce tristique tortor id laoreet blandit. Donec laoreet enim felis, consequat faucibus ante auctor vitae. Duis sollicitudin euismod dolor, in accumsan ipsum. Mauris tempus ligula nec nisl ornare dictum. Quisque luctus dolor magna. Maecenas et neque eu mi pellentesque maximus eu sit amet purus. Fusce eu porta tellus. 
    </div>
  </div>
</div>

-- 相同的代码，这次内容更短 --

var pattern = Trianglify({
      cell_size: 25,
      x_colors: 'Greens'
    });
    pattern.canvas(document.getElementById('container1'));
    setInterval(function() {
      // method to be executed;
      var pattern = Trianglify({
        cell_size: 25,
        x_colors: 'Greens'
      });
      pattern.canvas(document.getElementById('container1'));
    }, 1000);

I just wraped them both inside a wrapper div that has `min-height: 100%`. The wrapper div will expand with the content if it get longers, while the canvas always fill the wrapper div.
.outer-wrapper{
  min-height: 100vh;
  position: relative;
}
canvas#container1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.screen-container {
  /*min-height: 100vh;*/
  position: relative;
}
.trianglify-container {
  background-color: transparent;
  color: #fff;
  text-align: center;
  /*padding-top: 20vh;*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>
<div class="outer-wrapper">
  <canvas id="container1"></canvas>
  <div class="screen-container trianglify-container">
    <div class="container">
Short content
    </div>
  </div>
</div>