title: Footer does not stick to the bottom even when it is set to position: absolute;
body: <p>I am creating a footer for my site and I wanted the footer to be fixed at the bottom. But when I scroll down, this won't go along with the document. It stays at the bottom of the page always. I have initialized the footer to position: absolute, and also added bottom: 0 of my CSS code. But it still stuck in the middle of the page. How can I resolve this everyone?</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>.footer {
    background-color: red;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    .upper-footer,
    .lower-footer {
      padding: 10px 0 33px 0;
      margin: 0;
      width: 100%;
    }
    .upper-footer {
      background: #252525;
      .upper-footer-links {
        float: left;
        position: relative;
        margin: 3px -3px;
        a {
          text-decoration: none;
          color: #ffffff;
        }
        .span {
          position: inherit;
          right: -1px;
          color: #7b7b7b;
        }
      }
    }
    .lower-footer {
      background: #3c3c3c;
      height: 74px;
      .footer-information {
        float: left;
        width: 458px;
        p {
          line-height: 23px;
          margin: 15px 0;
          color: #9b9b9b;
        }
      }
      .footer-sns-links {
        float: right;
        padding: 28px 0;
        ul {
          list-style: none;
          display: inline;
          li {
            display: inline-block;
            border: 1px solid #686868;
            padding: 8px;
            &amp;:hover {
              background-color: #373737;
            }
          }
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="footer"&gt;
    &lt;div class="upper-footer"&gt;
      &lt;div class="wrapper"&gt;
        &lt;div class="upper-footer-links"&gt;
          &lt;a href="#"&gt;개인정보처리방침&lt;/a&gt;&amp;nbsp; &lt;span&gt;|&lt;/span&gt; &amp;nbsp;
          &lt;a href="#"&gt;이메일무단수집거부&lt;/a&gt;&amp;nbsp; &lt;span&gt;|&lt;/span&gt; &amp;nbsp;
          &lt;a href="#"&gt;사이트맵&lt;/a&gt;&amp;nbsp; &lt;span&gt;|&lt;/span&gt; &amp;nbsp;
          &lt;a href="#"&gt;찾아오시는 길&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="lower-footer"&gt;
      &lt;div class="wrapper"&gt;
        &lt;div class="footer-information"&gt;
          &lt;p class="footer-info"&gt;02841 서울특별시 성북구 안암로 145 크림슨창업지원단 &amp;nbsp;|&amp;nbsp; TEL : 02.3290.4810 &amp;nbsp;|&amp;nbsp; E-MAIL : startup@korea.ac.kr&lt;br&gt;COPYRIGHT(C)2018 KOREA UNIVERSITY. ALL RIGHTS RESERVED.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="footer-sns-links"&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;img href="#" src="images/icon/icon_ss_02.png"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img href="#" src="images/icon/icon_ss_03.png"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img href="#" src="images/icon/icon_ss_01.png"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img href="#" src="images/icon/icon_ss_04.png"&gt;&lt;/li&gt;
            &lt;li&gt;&lt;img href="#" src="images/icon/icon_ss_05.png"&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>By the way, my footer has two different footers, the upper footer and the lower footer and both footers are inside a div called ".footer"</p>