A Pen by Anonasaurus Rex.

index.html

<div class="wrapper">
    <header>
      <h1>Sticky Footer <span>Just CSS!</span></h1>
    </header>
    
    <div class="sticky"></div>
</div>

<footer>
  <h1>Footer <span>Resize the window!</span></h1>
</footer>

Sticky-Footer.markdown

Sticky Footer

Just CSS.

Forked from Wallace Erick's Pen Sticky Footer.

A Pen by Captain Anonymous on CodePen.

License.

style.scss

@import "compass/css3";
@import "compass";
@import url("http://fonts.googleapis.com/css?family=Lato");

$background: #2ecc71;
$checkbox-base-color: #27ae60;
$footer-height: 200px;

* {
  margin: 0; 
  padding: 0;
  //text-align: center;
  @include box-sizing(border-box);
}

body {
  font-family: lato;
  color: #fff;
  background: $background;
}

h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase; 
  padding: 55px 30px;
  span { 
    font-size: 13px;
    display: block;
    padding-left: 4px;
  }
}

p {
  display: block;
  float: left;
  font-size: 20px;
}

html, 
body {
	height: 100%;
}

.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto $footer-height * -1;
}

.sticky {
	height: $footer-height; 
}

footer {
  background-color: darken($background, 15%);
	height: $footer-height;
  h1 { 
    padding-top: 20px!important;
  }
}