次のdivに適合するようにキャンバスを伸ばしてください

Question

私はcanvasを持っていますが、これは100％画面の幅と100％以上の画面の高さにしたいと考えていますが、divが画面の下部を越えると、

トライアンシールを使用して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>

EDIT

私にとって重要なことはすぐにキャンバス次のdivはそれのすべてをカバーキャンバスを持っている必要が背景だと、少なくとも1画面をカバーすることです。これを達成するための別の方法があります。私は私のアプローチを適応させてうれしいです。

Answer 1

の高さを含むため.screenコンテナを更新しました あなたが望むものを、この結果は？

- ロングコンテンツ -

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>

Answer 2

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

このようにしますか？私はキャンバス

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