title: Expand the element's height to bottom of the page
body: <p>I have a canvas in my page, and i want it to fill the page until it reaches the bottom of the page.</p>
  
  <p>I have the canvas' width set to 100%, but i cannot set the height to 100% as it extends too far. </p>
  
  <p>The position of the div is not 0,0 of the browser window there are other things above it, so i end up with a scroll bar because 100% height extends well below the bottom of my browser's output.</p>
  
  <p>So i was wondering how can i extend the element's height to reach the bottom of the page from its current position on the web page?</p>
  
  <pre><code>&lt;style&gt;
  .canvas{
      position:absolute;
      width:100%;
      height:100%;
  }
  &lt;style&gt;
  &lt;div class="logo"&gt;Stuff here&lt;/div&gt;
  &lt;div class="output"&gt;
      &lt;canvas class="canvas"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Do i need to use JavaScript or is there a CSS method to doing this?</p>