title: Footer is positioned at viewpoint height instead of being positioned below the content of the page
body: <p>I am trying to create a single page website using relative units (vh; em; rem) for the first time but the footer wouldn't stay at the bottom and for different screen sizes it stays at the viewport height of the screen. For mobile it works fine since the text is smaller thanks to the units.</p>
  <p>I've tired setting each sections (nav, homePG, footer) a grid-row of 1,2,3 respectively to see if it can fix the issue.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      height: 100%;
      width: 100%;
      margin: auto;
      padding: auto;
      background-color: #020224;
      color: white;
  }
  
  .container{
      min-height: 100%;
      display: grid;
      grid-template-rows: 1fr auto;
  }
  
  /*  NAV SECTION  */
  .nav{
      position: sticky;
      background-color: transparent;
      top: 0;
      left: 0;
      right: 0;
      display: grid;
      grid-template-columns: auto auto;
      z-index: 1;
  }
  
  .nav a:link, .nav a:visited{
      color: white;
      text-decoration: none;
  }
  
  .nav a:hover{
      color: cyan;
  }
  
  .navLeft {
      font-size: 2em;
      text-align: left;
  }
  
  .navRight{
      font-size: 1.5em;
      text-align: right; 
  }
  
  .navRight a {
      padding-left: 10px;
  }
  
  /*  MAIN CONTENT  */
  
  .homePG{
      position: absolute;
      margin: auto;
      width: 100%;
      text-align: center;
      font-size: 7vw;
  }
  
  
  
  .homePG img{
      width: 500px;
      height: 500px;
  }
  
  .homePG h1{ 
      font-size: 1em;
  }
  
  .homePG p{
      font-size: 0.5em;
  }
  
  
  /*  FOOTER CONTENT  */
  
  .footer{
      position: absolute;
      text-align: center;
      margin: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #030342;
      padding:10px;
      font-size:15px;
  }
  
  
  @media screen and (max-width: 1000px) {
  
      .homePG{  
          padding-top: 50%;
      }
      .homePG img{
          width: 400px;
          height: 400px;
      }
      
  }
  
  @media screen and (max-width: 750px) {
  
      .homePG img{
          width: 200px;
          height: 200px;
      }
      
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;title&gt;Brandon&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  &lt;body class="container"&gt;
  
  &lt;section class="nav"&gt;
      &lt;nav class="navLeft"&gt;
          &lt;a href="#" class="navTitle"&gt;Brandon&lt;/a&gt;
      &lt;/nav&gt;
      &lt;nav class="navRight"&gt;
          &lt;a href="#"&gt;ABOUT&lt;/a&gt;
          &lt;a href="#"&gt;PROJECTS&lt;/a&gt;
          &lt;a href="#"&gt;CONTACT&lt;/a&gt;
      &lt;/nav&gt;
  &lt;/section&gt;
  &lt;section class="homePG"&gt;
      &lt;img src="./assets/pic.png"&gt;&lt;/img&gt;
      &lt;h1&gt;Brandon&lt;/h1&gt;
      &lt;p&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      &lt;/p&gt;
  &lt;/section&gt;
  &lt;section class="footer"&gt;
      &lt;footer&gt;
          @ Copyright
      &lt;/footer&gt;
  &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>