Sticky Bottom Footer

by koh_edwin

HTML

<div id="wrapper">

  <div id="header">
  </div>
  <!-- #header -->

  <div id="content">
    <p>
      Dummy Paragraph inside Content
    </p>
    
    <p>
      Dummy Text
    </p>
    
    <p>
      Dummy Text
    </p>
    
 
    

    

    
  </div>
  <!-- #content -->

  <div id="footer"> this is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a te a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a testthis is a test
  </div>
  <!-- #footer -->

</div>
<!-- #wrapper -->

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#wrapper {
  min-height: 100%;
  position: relative;
}

#header {
  background: #ededed;
  padding: 10px;
}

#content {
  padding-bottom: 100px;
  /* Height of the footer element */
}

#footer {
  background: #ffab62;
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
}

#content p
{
  padding:10px;
  background:#222937;
  color:#eee;
}