如何使元素具有頁面（文檔）的 100% 寬度和高度，而不僅僅是窗口（瀏覽器）？

Question

我有一段代碼，它有一個輕微的閃爍動畫，我想用作背景，但目前它只填充瀏覽器窗口，我希望它填充整個頁面/文檔。

任何人都可以幫忙嗎？ JSFiddle在這里 - https://jsfiddle.net/83aahcng/1/

<div id="container">
  <canvas id="pixie"></canvas>
  <div class="content">
    <p>This is some content</p>
  </div>
</div>

Answer 1

更改您的setDimensions如下所示：

    function setDimensions(e) {   
 var body = document.body,
    html = document.documentElement;
            WIDTH = window.innerWidth;
            HEIGHT =  Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );
            container.style.width = WIDTH+'px';
            container.style.height = HEIGHT+'px';
            canvas.width = WIDTH;
            canvas.height = HEIGHT;
        }

https://jsfiddle.net/83aahcng/2/