How do I make an element 100% width and height of the page (document) and not just the window (browser)?

Question

I've got this piece of code that has a slight twinkling animation that I'm wanting to use as a background but current it's only filling the browser window and I want it to fill the entire page/document.

Can anyone help? JSFiddle here - 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

change your setDimensions like below:

    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/