title: how can I set my gradient background in css for full width and height of the page?
body: <p>I just downloaded example page from <code>bootstrap</code>, taken from <a href="https://getbootstrap.com/examples/cover/" rel="nofollow">here</a></p>
  
  <p>it is designed so that there are no scrollbars and the whole content is one-page only.</p>
  
  <p>Now, I also found the example with dynamic gradient changer <a href="https://codepen.io/quasimondo/pen/lDdrF" rel="nofollow">here</a></p>
  
  <p>I want to use the gradient changer on the bootstrap cover page.</p>
  
  <p>The bootstrap cover page has css:</p>
  
  <pre><code>html,
  body {
    height: 100%;
  }
  </code></pre>
  
  <p>and the gradient-changer has:</p>
  
  <pre><code>body{
     background-color: #000000;
     padding: 0px;
     margin: 0px;
   }
  
  #gradient
  {
    width: 100%;
    height: 800px;
    padding: 0px;
    margin: 0px;
  }
  </code></pre>
  
  <p>as you can see the '#gradient' has <code>height: 800px</code>, so it does not cover the page vertically in 100%. How can I modify this code so that the height covers 100%?</p>