title: How to make a div fill the entire page height using css?
body: <p>I am trying to extend the bottom of the middle section of the webpage(div main) down the whole page, covering up the background at the bottom. </p>
  
  <p>Here is the and image of the webpage and CSS code file for the webpage:</p>
  
  <p><a href="https://i.stack.imgur.com/EPRnt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EPRnt.png" alt="Webpage Image"></a></p>
  
  <pre><code>body {
      background: url('black_gradient.png')repeat-x;
      text-align: center;
  }
  #main {
      width: 1000px;
      background: url('brown gradient.jpg')repeat-x;
      margin: 25px auto;  
      border: solid 2px #ff3819;
      border-bottom: solid 0px;
      padding: 10px;
  }
  h1 {
      text-align: center;
      font-family:"Times New Roman";
      font: 24pt;
      color: #000000;
  }
  hr {
      height: 2px;
      background-color: #000000;
  }
  p {
      font-family:"Calibri";
      font-size: 12pt;
      text-align: left;
      text-indent: 48px;
      color: #000000;
  }
  </code></pre>