title: Putting footer bottom of page through 100% height
body: <p>I am trying to create a footer for my page. I have tried to make it stick at the absolute bottom of the page and after some online research it told me to modify the height value of my body. However, once I do that, nothing changes. Here is my code:</p>
  
  <pre><code>    *{
  margin:0;
  padding:0:
  }
  
  html{
      height:100%;
      min-height:100%;
  }
  
  #wrapper{
      height: 100%;
  }
  
  /*****************/
  /*****HEADER******/
  /*****************/
  
  
  
  #header{
  
      width: 100%;
  
      margin-top:0px;
      margin-bottom:2.5%;
      margin-right:0px;
      margin-left:0px;
  
      padding-top:2%;
      padding-bottom:0.5%;
      padding-left:0%;
      padding-right:0%;
  
      border-bottom-style:solid;
      border-bottom-color: black;
  
      background: lightgrey;
  }
  
  #header&gt;h1{
      color:black;
      margin: 0px 0px 0px 10px;
  }
  
  #header&gt;p{
      font-style: italic;
      text-align: left;
      color:black;
      margin: 0px 0px 0px 20px;
  }
  
  /*****************/
  /*****Body******/
  /*****************/
  
  #content{
  
      position: relative;
  
      height:100%;
      min-height: 100%;
      max-height: 100%;
  }
  
  
  #content&gt;p{
      margin-left:2.5%;
  }
  
  #intro_text{
      font-style: italic;
  
      margin-bottom:2.5%;
  }
  
  #main_nav{
      margin-top:1%;
      margin-left:5%;
  }
  
  
  
  
  /*****************/
  /******FOOTER*****/
  /*****************/
  
  #footer{
  
      font-style: italic;
      text-align: center;
      position: relative;
  
      bottom: 0;
  
  }
  </code></pre>
  
  <p>EDIT: Added HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  
  &lt;head&gt;
       &lt;meta charset="utf-8"&gt;
       &lt;link rel="stylesheet" type="text/css" href="./css/main.css"&gt;
       &lt;script src="./js/script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  
      &lt;div id="wrapper"&gt;
  
          &lt;div id="header"&gt;
              &lt;h1&gt;My Web Space&lt;/h1&gt;
              &lt;p&gt; First HTML Page using Sublime Text&lt;/p&gt;
          &lt;/div&gt;
  
  
  
          &lt;div id="content"&gt;
  
              &lt;p id=intro_text&gt;Hello, my name is Alex and I am an aspiring web designer&lt;/p&gt;
  
  
              &lt;p&gt;Links to various test pages I am working with&lt;/p&gt;
              &lt;ul id=main_nav&gt;
                  &lt;li&gt;&lt;a href=test_link.html&gt;Linking to another page test&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
  
          &lt;/div&gt;
  
          &lt;div id="footer"&gt;
              &lt;p id=footer_text&gt;Me, 2016&lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>