title: Sticky footer doesn't work
body: <p>Hi I know that there have been a lot of questions about this before but I can't seem to find my problem with the footer.</p>
  
  <p><a href="https://stackoverflow.com/questions/16093530/my-sticky-footer-doesnt-work">This did a lot already</a> but when i scroll down, does my footer stay at the same place as it was when the page loaded. Is there a way to fix this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
   line-height: 24px;
   font-size: 12px;
   background-color: #FF3333;
   height: 100%;
  }
  h1 {
   color: #777777;
   font-weight: normal;
   font-size: 19px;
   text-transform: uppercase;
   border-bottom: 3px #DDDDDD solid;
   padding: 3px 0px;
   margin-left: 5px;
  }
  p {
   display: block;
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
   margin-left: 5px;
   font-size: 1.5em;
  }
  h2 {
   display: block;
   font-size: 1.5em;
   -webkit-margin-before: 0.83em;
   -webkit-margin-after: 0.83em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
   font-weight: bold;
   margin-left: 5px;
  }
  .Logo {
   position: absolute;
   padding-bottom: 5px;
   padding-right: 10px;
   top: 20px;
   right: 20px;
  } 
  form {
   margin: 0px 22% -1rem;
   background-color: white;
   min-height: 100%;
   margin-bottom: -60px;
  }
  #MainNav {
   margin-left: 5px;
  }
  .GridViewEditRow {
   width: 100%;
  }
  body, html { /*body and html have to be 100% to push header down */
   height: 100%;
   width: 100%;
  }
  body &gt; #wrapper { /* all content must be wrapped... #wrapper is my id.  Position relative IMPORTANT */
   position: relative;
   height: auto;
   min-height: 100%;
  }
  #header {
   height: 100px;
   background: rgba(255,255,255,0.2);
  }
  #content-wrap { /*#content-wrap is the wrapper for the content without header or footer | padding-bottom = footer height */
   padding-bottom: 100px;
  }
  #footer { /* position must be absolute and bottom must be 0 */
   height: 100px;
   width: 100%;
   background: rgba(255,255,255,0.2);
   position: absolute;
   bottom: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
  &lt;title&gt;SvShop!&lt;/title&gt;
  &lt;link href="../CSS/SvShop.css" rel="stylesheet" /&gt;
  &lt;link rel="shortcut icon" href="/images/SvShopIcon.ico" /&gt;
  &lt;asp:ContentPlaceHolder ID="head" runat="server"&gt;&lt;/asp:ContentPlaceHolder&gt;
  &lt;style type="text/css"&gt;
  #Container {
   height: 506px;
   margin-top: 0px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
      &lt;div class="Logo"&gt;
          &lt;img src="../Images/SvShop%20logo%20(Links%20rood,%20Zwarte%20tekst).jpg" style="height: 140px; width: 140px" /&gt;
      &lt;/div&gt;
      &lt;form runat="server"&gt;
          &lt;div class="page-wrap"&gt;
              &lt;h1&gt;SvShop&lt;/h1&gt;
              &lt;div id="MainNav"&gt;
                  &lt;asp:Menu ID="MenuMain" runat="server" Orientation="Horizontal"&gt;
                      &lt;Items&gt;
                          &lt;asp:MenuItem NavigateUrl="~/Index.aspx" Text="Startpagina" Value="Startpagina"&gt;&lt;/asp:MenuItem&gt;
                          &lt;asp:MenuItem Text="Kopen" Value="Kopen"&gt;
                              &lt;asp:MenuItem NavigateUrl="~/Overzichten/OverzichtAtlas.aspx" Text="Atlas" Value="Atlas"&gt;&lt;/asp:MenuItem&gt;
                              &lt;asp:MenuItem NavigateUrl="~/Overzichten/OverzichtRekenmachine.aspx" Text="Rekenmachine" Value="Rekenmachine"&gt;&lt;/asp:MenuItem&gt;
                          &lt;/asp:MenuItem&gt;
                          &lt;asp:MenuItem NavigateUrl="~/Verkopen.aspx" Text="Verkopen" Value="Verkopen"&gt;&lt;/asp:MenuItem&gt;
                          &lt;asp:MenuItem Text="Contact" Value="Contact"&gt;
                              &lt;asp:MenuItem NavigateUrl="~/Contact/Contact.aspx" Text="Contact" Value="Contact"&gt;&lt;/asp:MenuItem&gt;
                              &lt;asp:MenuItem NavigateUrl="~/Contact/Info.aspx" Text="Info" Value="Info"&gt;&lt;/asp:MenuItem&gt;
                          &lt;/asp:MenuItem&gt;
                      &lt;/Items&gt;
                  &lt;/asp:Menu&gt;
              &lt;/div&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"&gt;
              &lt;/asp:ContentPlaceHolder&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;footer&gt;
      &amp;copy SvShop - door Demey Thimo 6ITN - in opdracht van De Jaeger Els &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/dyssq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dyssq.png" alt="After editing the code as the answers say"></a></p>