title: Why is my footer not going to the bottom?
body: <p>The footer that I have keeps sticking to my div in the center and I can't seem to figure out why this is happening.</p>
  <p>I think it is something regarding the position but I don't know what. I tried changing the position of the background div because I thought with it being absolute it was getting ignored and therefore the footer was coming up, however, that does not seem to be the case.</p>
  <p>Here is my code snippet</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>body {
    margin: 0;
  }
  
  nav {
    position: relative;
    text-align: center;
    width: 100%;
    height: 44px;
    padding-top: 44px;
  }
  
  nav a {
    margin: 80px;
    text-decoration: none;
    color: white;
    font-size: 33px;
  }
  
  nav a:hover {
    opacity: .5;
  }
  
  .background {
    position: absolute;
    width: 100vw;
    height: 100vh;
  }
  
  #contact-background {
    width: 100%;
  }
  
  .contact {
    position: relative;
    color: white;
    justify-content: center;
    align-items: center;
    width: 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 10%);
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 40px #2c2418;
  }
  
  .info {
    text-align: center;
  }
  
  .question {
    font-size: 80px;
    font-weight: normal;
    font-family: Adamas;
    text-align: center;
    margin: 0;
    padding-top: 40px;
    word-spacing: -40px;
  }
  
  h1 {
    top: -40px;
  }
  
  .divide {
    display: flex;
  }
  
  .logo,
  .form {
    flex: 1;
    width: 50%;
  }
  
  #contact-logo {
    width: 100%;
  }
  
  input,
  textarea {
    width: 90%;
    color: white;
  }
  
  .ui-autocomplete {
    background-color: #eceff1;
    width: 100px;
  }
  
  .form {
    width: 100%;
    display: flex;
    align-items: center;
  }
  
  form {
    width: 100%;
  }
  
  .submit {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, 120%);
  }
  
  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder,
  #submit-button {
    font-family: "Times New Roman";
    color: white;
  }
  
  input,
  textarea,
  #submit-button {
    background: rgba(255, 255, 255, 0.3);
    border: 0;
  }
  
  footer {
    position: relative;
    width: 100%;
    background: gray;
    color: white;
    text-align: center;
  }
  
  .footer-link {
    padding: 10px;
    text-decoration: none;
    color: white;
  }
  
  .footer-link:hover {
    opacity: .5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Contact Us&lt;/title&gt;
    &lt;link rel="stylesheet" href="contact-us.css" /&gt;
    &lt;link href="//db.onlinewebfonts.com/c/11e961d83e08fc7c0815dd269ff231da?family=Adamas" rel="stylesheet" type="text/css" /&gt;
    &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;script src="contact-us.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="background"&gt;
      &lt;img src="https://wallpaperaccess.com/full/3959339.jpg" id="contact-background"&gt;
    &lt;/div&gt;
  
    &lt;div class="nav"&gt;
      &lt;nav&gt;
        &lt;a id="nav1" href="index.html"&gt;Home&lt;/a&gt;
        &lt;a id="nav2" href="services.html"&gt;Services&lt;/a&gt;
        &lt;a id="nav3" href="founder2.html"&gt;Founder&lt;/a&gt;
        &lt;a id="nav4" href="about-us.html"&gt;About Us&lt;/a&gt;
        &lt;a id="nav5" href="contact-us.html"&gt;Contact Us&lt;/a&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  
  
    &lt;div class="contact"&gt;
      &lt;div class="info"&gt;
        &lt;h1 class="question"&gt;CONTACT US&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div class="divide"&gt;
        &lt;div class="logo"&gt;
          &lt;img src="contact-logo.png" id="contact-logo"&gt;
        &lt;/div&gt;
  
        &lt;div class="form"&gt;
          &lt;form action="#"&gt;
            &lt;label for="fname"&gt;&lt;/label&gt;
            &lt;p&gt;&lt;input type="text" id="fname" name="fname" placeholder="Name" size="60"&gt;&lt;/p&gt;
            &lt;label for="email"&gt;&lt;/label&gt;
            &lt;p&gt;&lt;input type="email" id="email" name="email" placeholder="What's your email?" size="60"&gt;&lt;/p&gt;
            &lt;label for="phone"&gt;&lt;/label&gt;
            &lt;p&gt;&lt;input type="tel" id="phone" name="phone" placeholder="What's your phone number?" size="60"&gt;&lt;/p&gt;
            &lt;label for="tags"&gt; &lt;/label&gt;
            &lt;p&gt;&lt;input id="tags" placeholder="What question do you have?"&gt;&lt;/p&gt;
            &lt;label for="info"&gt;&lt;/label&gt;
            &lt;p&gt;&lt;textarea id="info" name="info" placeholder="More information..." rows="7 " cols="49"&gt;&lt;/textarea&gt;&lt;/p&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="submit"&gt;
        &lt;button id="submit-button"&gt;Send Message&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;footer&gt;
      &lt;p&gt;&amp;copy; Random Analytix. All rights reserved. &lt;/p&gt;
      &lt;a class="footer-link" href="https://jigsaw.w3.org/css-validator/"&gt;CSS Validator&lt;/a&gt;
      &lt;a class="footer-link" href="https://validator.w3.org"&gt;HTML Validator&lt;/a&gt;
      &lt;a class="footer-link" href="index.html"&gt;Home&lt;/a&gt;
      &lt;a class="footer-link" href="services.html"&gt;Services&lt;/a&gt;
      &lt;a class="footer-link" href="founder2.html"&gt;Founder&lt;/a&gt;
      &lt;a class="footer-link" href="about-us.html"&gt;Our Story&lt;/a&gt;
      &lt;a class="footer-link" href="contact-us.html"&gt;Contact Us&lt;/a&gt;
    &lt;/footer&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/OrRnh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OrRnh.jpg" alt="Page shot" /></a></p>