将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>

编辑

对我来说，重要的是紧随画布后面的div需要被画布覆盖，并至少覆盖一个屏幕的背景。如果有其他方法可以实现这一点，我很乐意调整我的方法。

- HenryM

---

如果你的fiddle出现问题，你仍然可以保存它。我可以帮你看看它到了哪个步骤。 - Serg Chernata

“following div” 是什么意思？你是指“下一个同级别的 div 元素”吗？请使用正确的术语。 - vsync

@vsync：抱歉，我是指下一个兄弟 div。 - HenryM

@AVAVT 我试过把它们包装在一个容器中，但没有成功。 - HenryM

@MichaelCoker，很抱歉，我不明白你的jsfiddle在做什么。 - HenryM

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>

- AVAVT

Answer 2

https://jsfiddle.net/hbe5j4m9/4/

像这样吗？我更新了.screen-container以包含画布的高度。

.screen-container {
min-height: 100%;
position: relative
}

- Himanshu Bansal